Выполнение изменения размера элемента при его перетаскивании из его центра

Question

Я хочу, чтобы элемент изменялся в зависимости от его местоположения внутри родителя, а его тащили из его центра.

Проблема в том, что перемещаемые элементы перемещаются от курсора во время перетаскивания.

jsfiddle demo должен четко указать, что это за намерение.

Jsfiddle

Javascript Код:

var ele  = document.getElementsByClassName ("target")[0]; 
var parent = document.getElementsByClassName ("containerParent")[0]; 
var mouseDownIs = false; 
ele.addEventListener ("mousedown" , eleMouseDown , false); 

function eleMouseDown() { 
    mouseDownIs = true; 
    document.addEventListener ("mousemove" , eleMouseMove , false); 
} 

function eleMouseMove (ev) { 
    if (mouseDownIs === true) { 
     var pX = ev.pageX; 
     var pY = ev.pageY; 
     var inParentPosX= pX - parent.offsetLeft; 
     var inParentPosY= pY - parent.offsetTop; 
     var mFactor  = 0.12; // ratio -> half parent divided by child width 
     if (inParentPosX > 125) { // first edge case scenario; restrict max size of draggable element (child) 
      var result  = (125 * mFactor); 
     } else if (inParentPosX <= 25) { // second edge case scenario; restrict min size of draggable element (child) 
      var result = (25 * mFactor); 
      } else { 
      var result = (inParentPosX * mFactor); 
     } 
// This is where things are probably going wrong 
     var posX  = inParentPosX + ((result - 2)/2); // -2 is for the border value 
     var posY  = inParentPosY + ((result - 2)/2); 
     ele.style.left = posX + "px"; 
     ele.style.top = posY + "px"; 
     ele.style.width = result + "px"; 
     ele.style.height= result + "px"; 
    } 
    document.addEventListener ("mouseup" , eleMouseUp , false); 
} 

function eleMouseUp() { 
    mouseDownIs = false; 
    document.removeEventListener ("mousemove" , eleMouseMove , false); 
    document.removeEventListener ("mouseup" , eleMouseUp , false); 
} 

Это репост из question я отправил вчера, которые только получают только 13 видов.

Answer 1

var posX = inParentPosX + ((result - 2)/2); 
var posY = inParentPosY + ((result - 2)/2); 

должен быть

var posX = inParentPosX - ((result - 2)/2); 
var posY = inParentPosY - ((result - 2)/2);