Javascript 从图元中心拖动图元时调整其大小

Javascript 从图元中心拖动图元时调整其大小,javascript,dynamic,drag-and-drop,drag,Javascript,Dynamic,Drag And Drop,Drag,我希望在从中心拖动元素时,根据其在父元素中的位置调整其大小 问题在于,可拖动的元素在拖动时会远离光标 政府应明确其意图 Javascript代码: var ele = document.getElementsByClassName ("target")[0]; var parent = document.getElementsByClassName ("containerParent")[0]; var mouseDownIs = false; ele.addEventListene

我希望在从中心拖动元素时,根据其在父元素中的位置调整其大小

问题在于,可拖动的元素在拖动时会远离光标

政府应明确其意图

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);
}
var ele=document.getElementsByClassName(“目标”)[0];
var parent=document.getElementsByClassName(“containerParent”)[0];
var mouseDownIs=false;
ele.addEventListener(“mousedown”,eleMouseDown,false);
函数eleMouseDown(){
mouseDownIs=true;
document.addEventListener(“mousemove”,eleMouseMove,false);
}
函数eleMouseMove(ev){
如果(mouseDownIs===true){
var pX=ev.pageX;
var pY=ev.pageY;
var inParentPosX=pX-parent.offsetLeft;
var inParentPosY=pY-parent.offsetTop;
var mFactor=0.12;//比率->半父项除以子项宽度
如果(inParentPosX>125){//第一个边缘案例场景;限制可拖动元素(子元素)的最大大小
var结果=(125*mFactor);
}else if(在parentposx中)
应该是

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

谢谢你&我不敢相信我犯了这么愚蠢的错误。非常感谢sza。一个小小的更正:应该是:var posX=inParentPosX-(结果/2);var posY=inParentPosY-(结果/2);@Kayote对,如果你去掉边界增量,它看起来会更好。
var posX = inParentPosX - ((result - 2) / 2);
var posY = inParentPosY - ((result - 2) / 2);