перемещение drag and drop и изменение размеров

  var delta_w = 0; // Изменение по ширине 
  var delta_h = 0; // Изменение по высоте 
  /* После загрузки страницы */ 
 
    /* Определяем браузер */ 
 
    
    block_r = document.getElementById("square-rect"); // Получаем блок для изменения размеров 
 
    document.onmouseup = clearXY; // Ставим обработку на отпускание кнопки мыши 
    block_r.onmousedown = saveWH; // Ставим обработку на нажатие кнопки мыши 
 
  /* Функция для получения текущих координат курсора мыши */ 
  function getXY(obj_event) { 
    if (obj_event) { 
      x = obj_event.pageX; 
      y = obj_event.pageY; 
    } 
    else { 
      x = window.event.clientX; 
      y = window.event.clientY; 
      if (ie) { 
        y -= 2; 
        x -= 2; 
      } 
    } 
    return new Array(x, y); 
  } 
  function saveWH(obj_event) { 
    var point = getXY(obj_event); 
    w_block = ball.clientWidth; // Текущая ширина блока 
    h_block = ball.clientHeight; // Текущая высота блока 
    delta_w = w_block - point[0]; // Измеряем текущую разницу между шириной и x-координатой мыши 
    delta_h = h_block - point[1]; // Измеряем текущую разницу между высотой и y-координатой мыши 
    /* Ставим обработку движения мыши для разных браузеров */ 
    document.onmousemove = resizeBlock; 
     document.addEventListener("onmousemove", resizeBlock, false); 
    return false; // Отключаем стандартную обработку нажатия мыши 
  } 
  /* Функция для измерения ширины окна */ 
  function clientWidth() { 
    return image.width; 
  } 
  /* Функция для измерения высоты окна */ 
  function clientHeight() { 
    return image.height; 
  } 
  /* При отпускании кнопки мыши отключаем обработку движения курсора мыши */ 
  function clearXY() { 
    document.onmousemove = null; 
  } 
  function resizeBlock(obj_event) { 
    var point = getXY(obj_event); 
    new_w = delta_w + point[0]; // Изменяем новое приращение по ширине 
    new_h = delta_h + point[1]; // Изменяем новое приращение по высоте 
    ball.style.width = new_w + "px"; // Устанавливаем новую ширину блока 
    ball.style.height = new_h + "px"; // Устанавливаем новую высоту блока 
    /* Если блок выходит за пределы экрана, то устанавливаем максимальные значения для ширины и высоты */ 
    if (ball.offsetLeft + ball.clientWidth > clientWidth())  
      ball.style.width = (clientWidth() - ball.offsetLeft)  + "px"; 
    if (ball.offsetTop + ball.clientHeight > clientHeight()) 
      ball.style.height = (clientHeight() - ball.offsetTop) + "px"; 
  }             
                 
 
Element.prototype.makeDraggable=function(){ 
  var o=this 
 
 
  o.onmousedown=function(e){ 
    var offsetX=e.pageX-parseInt(o.style.left) 
    var offsetY=e.pageY-parseInt(o.style.top) 
 
 
 
    document.onmousemove=function(e) { 
      o.style.left=Math.max(Math.min(e.pageX-offsetX,o.parentNode.clientWidth-o.clientWidth),0)+'px' 
      o.style.top=Math.max(Math.min(e.pageY-offsetY,o.parentNode.clientHeight-o.clientHeight),0)+'px' 
     
 
    var Xtop=parseInt(o.style.top); 
    var Xleft=parseInt(o.style.left); 
 
 
 
    } 
    document.onmouseup = function(e) { 
      document.onmousemove=o.onmouseup=null 
    } 
  } 
  o.ondragstart = function(){return 0} 
} 
ball.makeDraggable()

#parent{ 
position:absolute; 
  top:0; 
  left:13px; 
 
  width:300px; 
  height:300px; 
  z-index: 100; 
  border:1px solid; 
} 
#ball{ 
  width:100px; 
  height:100px; 
  position:absolute; 
   border:1px solid; 
 
} 
#square-rect { 
    background-color: red; 
    width: 15px; 
    height: 15px; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
}

<div id="parent"> 
<div id="ball" style="left:10px;top:10px;" class="rect-war"> 
<span id="square-rect"></span> 
</div> 
</div>