Question

我正在尝试使用transform translate拖动一个容器，但有些东西导致了一个跳跃的行为，我无法弄清楚是什么原因。更新：当元素的容器并非始终位于文档的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");
});

Answer 1

OffsetX和OffsetY可以为您提供相对于现在悬停的元素的光标位置。您在mousedown中保存了初始坐标。当mousemove被触发时你的坐标变了一点，所以当你从首字母中减去一个时你得到零（或1px的差异）并且你的div到了左上角。在它高兴你的光标悬停的身体元素和鼠标移动后，您获得与身体相关的坐标。因此，当您从新坐标中减去零时，您将获得真实坐标，并且您的div将转到正确的位置。然后你将获得与拖动div相关的坐标，并将再次获得零，然后是真正的坐标等等。

使用pageX和pageY代替！ fiddle

$('.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）来获取新的坐标。

为什么拖着css翻译跳？

1 个答案: