我正在尝试使用转换翻译来拖动容器，但是某些原因导致了跳动行为，我无法弄清楚是什么原因。
更新：当元素的容器不总是位于文档的0,0位置时，这必须对元素起作用。
HTML：
<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>
Javascript：
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");
});
OffsetX和OffsetY可能会给您相对于现在悬停的元素的光标pos。您将初始坐标保存在mousedown中。触发mousemove时，此坐标略有变化，因此当您从首字母减去1时，您得到零（或相差1px），并且div移至左上角。鼠标悬停后，光标将悬停在body元素上，并在mousemove中获得与body相关的坐标。因此，当您从新坐标中减去零时，您将获得真实坐标，并且div将移至正确的位置。然后，您将获得与拖动div相关的坐标，并且将再次获得零，然后是实坐标，依此类推。
请改用pageX和pageY！小提琴
$('.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");
});
您需要保存div（move.offset()）的原始坐标，并使用鼠标偏移（e.pageX-startX，e.pageY-startY）获取新坐标。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句