如何仅触发点击元素对应函数而非全class元素？实现div等比独立缩放

问题原因 #

你现有代码的核心问题有三个：

1. 所有元素选择逻辑直接用.dragger类名，会命中页面上所有符合条件的div，导致同步修改
2. 存储拖拽状态的坐标、宽高变量都是全局的，没有和当前操作的元素绑定
3. draggerMove函数中遍历了全部dragger元素，自然会批量修改所有元素的尺寸

不需要给每个元素加单独的编号类，依托事件触发的target关联父子元素即可，你的原有HTML结构不用做任何调整。

修正后的完整JS代码 #

$(".handle").bind('mousedown', draggerDown);
$("body").bind('mouseup', draggerUp);

function calculateNewSize(size) {
    // {currHeight, currWidth, newHeight, newWidth, offsetX, offsetY}
    var newWidth;
    var newHeight;
    if (Math.abs(size.offsetX) > Math.abs(size.offsetY)) {
        newWidth = size.currWidth + size.offsetX;
        newHeight = newWidth * (size.currHeight / size.currWidth);
    } else {
        newHeight = size.currHeight + size.offsetY;
        newWidth = newHeight * (size.currWidth / size.currHeight);
    }
    return {
        "height": newHeight,
        "width": newWidth
    };
}

function draggerDown(e) {
    e.stopPropagation();
    e.preventDefault();
    // 获取当前点击的handle对应的父级dragger元素
    const $targetDragger = $(this).parent('.dragger');
    // 存储当前拖拽的初始状态，局部变量仅作用于本次拖拽
    let startX = e.pageX;
    let startY = e.pageY;
    let currHeight = $targetDragger.height();
    let currWidth = $targetDragger.width();
    
    // 绑定mousemove事件，仅操作当前目标dragger
    function draggerMove(e) {
        const offsetX = e.pageX - startX;
        const offsetY = e.pageY - startY;
        
        const newSize = calculateNewSize({
            "currHeight": currHeight,
            "currWidth": currWidth,
            "offsetX": offsetX,
            "offsetY": offsetY
        });
        
        $targetDragger.css({
            height: newSize.height + "px",
            width: newSize.width + "px"
        });
    }
    
    // 绑定一次性的mouseup事件，解绑当前mousemove
    $("body").one('mouseup', function() {
        $("body").off('mousemove', draggerMove);
    }).bind('mousemove', draggerMove);
}

// 原有全局逻辑保留
if (window.parent && window.parent.parent){
    window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: "xUAZ5"
    }], "*")
}
window.name = "result"

核心修改点说明 #

• 拖拽触发时通过事件源直接关联对应的缩放容器，不会选错操作目标
• 所有拖拽状态变量都封装在单次拖拽的作用域内，不同元素的拖拽操作互不干扰
• 移除了批量遍历所有dragger的逻辑，每次缩放仅修改当前操作的目标元素
• 原有等比例计算逻辑完全保留，符合你的需求

内容的提问来源于stack exchange，提问作者elloaze