• -> moveable box
• -> create-resizable-dom-elements
• ->
• ->

  //CODE

  
  

.resize { resize: both; overflow: auto; }

参考リンク：demo1：demo2

Click to make me resizable

  (function(){
  'use strict';
  var p = document.querySelector('p.testresize');
  p.addEventListener('click', function init() {
    p.removeEventListener('click', init, false);
    p.className = p.className + ' resizable';
    var resizer = document.createElement('div');
    resizer.className = 'resizer';
    p.appendChild(resizer);
    resizer.addEventListener('mousedown', initDrag, false);
  }, false);
  var startX, startY, startWidth, startHeight;
  function initDrag(e) {
   startX = e.clientX;
   startY = e.clientY;
   startWidth = parseInt(document.defaultView.getComputedStyle(p).width, 10);
   startHeight = parseInt(document.defaultView.getComputedStyle(p).height, 10);
   document.documentElement.addEventListener('mousemove', doDrag, false);
   document.documentElement.addEventListener('mouseup', stopDrag, false);
  }
  function doDrag(e) {
   p.style.width = (startWidth + e.clientX - startX) + 'px';
   p.style.height = (startHeight + e.clientY - startY) + 'px';
  }
  function stopDrag(e) {
    document.documentElement.removeEventListener('mousemove', doDrag, false);    document.documentElement.removeEventListener('mouseup', stopDrag, false);
  }
  })();

参考リンク：jquery-resizable

// resizeTable
function resizeTable($area) {
var $tdcnt =  $area.children('div:first').children('div').length,
    $maxwd = $area.width() - 2 - $tdcnt,
    $grid = Math.floor($maxwd / 12),
    $lasttd = $area.children('div').children('div:last').attr('data-cnt');
$area.children('div').children('div[data-cnt != ' + $lasttd + ']').resizable({
 ghost: true,
 helper: "resizable-helper",
 grid: $grid,
 minWidth: $grid,
 handles: 'e',
 start: function(e, ui) {
 },
 stop: function(e, ui) {
   var w;
   var uicnt = ui.element.attr('data-cnt');
   w = $maxwd - ui.size.width;
   ui.element.next().width(w > $grid ? w : $grid);
   $area.children('div').children('div[data-cnt = ' + uicnt + ']').next().width(w > $grid ? w : $grid);
   ui.element.width($maxwd - ui.element.next().width());
   $area.children('div').children('div[data-cnt = ' + uicnt + ']').width($maxwd - ui.element.next().width());
   $area.children('div').children('div').css("height", '');
   $obj.val(hanei($area));
   nAn.func.change(op['change']);
 }
});
$area.children('div').resizable({
 ghost: true,
 helper: "resizable-helper",
 minWidth: 20,
 handles: 's',
 stop: function(e, ui) {
  ui.element.attr('data-height', ui.element.height());
  ui.element.css("width", '');
  $obj.val(hanei($area));
  nAn.func.change(op['change']);
 }
});
};

// resizeTable destroy
function destroyresizeTable($area) {
  $area.find('.ui-resizable').resizable("destroy");
};