javascript - 中心からドラッグしながら要素のサイズを変更する

Question

中心からドラッグされている間、親内の位置に基づいて要素のサイズを変更したい。

問題は、ドラッグ可能な要素がドラッグ中にカーソルから離れることです。

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);
}

これは、私が昨日投稿した質問の再投稿で、閲覧数は 13 回しかありません。