为什么用css拖动转换为跳转

Why is dragging with css translate jumping?

本文关键字：转换 拖动 css 为什么      更新时间：2023-09-26

我试图使用transform-translate拖动一个容器，但有些东西导致了跳跃行为，我不知道原因是什么
UPDATE：当元素的容器不总是位于文档的0,0处时，这必须适用于元素。

http://jsfiddle.net/dML5t/2/

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可以为您提供相对于当前悬停的元素的光标位置。您在mousedown中保存了初始坐标。当鼠标移动被触发时，你的这个坐标发生了一点变化，所以当你从首字母中减去一时，你得到了零（或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）来获取新坐标。

相关文章：