Javascript 为什么用css拖动是跳跃？

我试图使用transform translate拖动容器，但有什么东西导致了跳跃行为，我无法找出原因。
更新：当元素的容器并非始终位于文档的0,0处时，此操作必须适用于元素

HTML:

---

OffsetX和OffsetY可以为您提供光标相对于现在悬停的元素的位置。您在mousedown中保存了初始坐标。当mousemove被触发时，这个坐标发生了一点变化，所以当你从首字母中减去一，你得到了零（或1px的差值），你的div进入了左上角。发生后，光标悬停在body元素上，并在mousemove中获得与body相关的坐标。所以当你从新的坐标中减去你的零，你得到了真实的坐标，你的div到了正确的位置。然后，您将获得与拖动div相关的坐标，并再次获得零，然后是实坐标，依此类推

改用pageX和pageY

---

您需要保存div的原始坐标（

move.offset（）

）并使用鼠标偏移（

e.pageX-startX

，

e.pageY-startY

）来获取新坐标

OffsetX和OffsetY可能会给出光标相对于当前悬停元素的位置。您在mousedown中保存了初始坐标。当mousemove被触发时，这个坐标发生了一点变化，所以当你从首字母中减去一，你得到了零（或1px的差值），你的div进入了左上角。发生后，光标悬停在body元素上，并在mousemove中获得与body相关的坐标。所以当你从新的坐标中减去你的零，你得到了真实的坐标，你的div到了正确的位置。然后，您将获得与拖动div相关的坐标，并再次获得零，然后是实坐标，依此类推

改用pageX和pageY

---

---

您需要保存div的原始坐标（

move.offset（）

）并使用鼠标偏移（

e.pageX-startX

，

e.pageY-startY

）来获取新坐标

但容器的位置是绝对的。我认为event.page将相对于文档0,0工作。event.offset不是比substract offset（）更好吗？@shuji对不起，我的代码出错了，修复了。请看我的更新答案。OffsetX和OffsetY可能会给你相对于你的div的光标位置，如果光标在它里面的话。所以它在你的代码中出现了，你得到了0，0。当它跳转到0时，0光标停留在容器上，并保持打开状态，为您提供与容器相关的真实坐标，并且您的div跳转到正确的位置。然后光标再次移到div上，得到0，0，依此类推。我明白了，非常感谢。但我认为你的答案在容器上不起作用，因为它不在0,0@shuji。谢谢你指出这一点，你是对的。我修好了，请看我更新的答案和小提琴。但容器的位置是绝对的。我认为event.page将相对于文档0,0工作。event.offset不是比substract offset（）更好吗？@shuji对不起，我的代码出错了，修复了。请看我的更新答案。OffsetX和OffsetY可能会给你相对于你的div的光标位置，如果光标在它里面的话。所以它在你的代码中出现了，你得到了0，0。当它跳转到0时，0光标停留在容器上，并保持打开状态，为您提供与容器相关的真实坐标，并且您的div跳转到正确的位置。然后光标再次移到div上，得到0，0，依此类推。我明白了，非常感谢。但我认为你的答案在容器上不起作用，因为它不在0,0@shuji。谢谢你指出这一点，你是对的。我修正了它，请看我更新的答案和小提琴。这是一个原始的概念/实现，还是你有一个工作，非急促的例子，你的工作？如果这是css转换的一种新用法，那么它非常聪明，但可能只是因为js引擎到DOM再到css渲染之间的延迟而不稳定。不，我正在处理一个svg项目，我想用转换属性导出它。这只是我举的一个例子。导出是什么意思？@Anthony希望保存它，并可能在其他可能不支持css的环境中使用它。这是一个原始的概念/实现，还是您有一个工作正常的示例？如果这是css转换的一种新用法，那么它非常聪明，但可能只是因为js引擎到DOM再到css渲染之间的延迟而不稳定。不，我正在处理一个svg项目，我想用转换属性导出它。这只是我举的一个例子。导出是什么意思？@Anthony试图保存它，并可能在其他可能不支持css的环境中使用它。

<div id=container style="position:absolute;left:50px;top:50px;width:500px;height:500px;background-color:red;">
    <div id=tcontainer style="position:relative;left:50px;top:50px;width:400px;height:400px;background-color:green;">
        <div id=move style="position:relative;left:20px;top:20px;height:150px;width:150px;background-color:lightgray;">
    </div>
</div>

obj = {startPositionX:0,startPositionY:0};
$('#move').on("mousedown",function(){
    var move = $(this);
    obj.startPositionX=event.offsetX+$('#tcontainer').offset().left;
    obj.startPositionY=event.offsetY+$('#tcontainer').offset().top;
    $(document).on("mousemove",function(e){
        console.log("dragging", e.pageX-obj.startPositionX, e.pageY-obj.startPositionY);
        move.css('transform','translate('+(e.pageX-obj.startPositionX)+'px, '+(e.pageY-obj.startPositionY)+'px)');
    });
});
$(document).on("mouseup",function(){
    $(this).off("mousemove");
});

$('.move').on("mousedown",function(me){
    var move = $(this);

    var lastOffset = move.data('lastTransform');
    var lastOffsetX = lastOffset ? lastOffset.dx : 0,
        lastOffsetY = lastOffset ? lastOffset.dy : 0;

    var startX = me.pageX - lastOffsetX, startY = me.pageY - lastOffsetY;

    $(document).on("mousemove",function(e){
        var newDx = e.pageX - startX,
            newDy = e.pageY - startY;
        console.log("dragging", e.pageX-startX, e.pageY-startY);
        move.css('transform','translate(' + newDx + 'px, ' + newDy + 'px)');

        // we need to save last made offset
        move.data('lastTransform', {dx: newDx, dy: newDy });
    });
});
$(document).on("mouseup",function(){
    $(this).off("mousemove");
});