为什么这个简单的拖放代码会导致元素闪烁

Question

我有一些非常简单的拖放jQuery垂直拖放代码：

function drag(ele){
    $(document).mousemove(function(e){
        yPos = ele.offset();
        yPos = yPos.top;
        diff = (yPos + ele.height()) - e.pageY;
        ele.css('top', e.pageY - diff);
    }).mouseup(function(){
        $(this).unbind('mousemove');
    });
}

它运行得很好，只是有时它会在小的变化中开始闪烁，diff变量会跳来跳去。我不知道是什么原因造成的，也许是其他人造成的？

http://jsfiddle.net/GTGMN/2/

这个问题在jsFiddle中更加突出。

Answer 1

这是因为您正在更改元素的top属性，同时使用该信息来移动元素。举个例子：

function drag(ele){
    $(document).mousemove(function(e){
        ele.css('top', e.pageY);
    }).mouseup(function(){
        $(this).unbind('mousemove');
    });
}
$('.box').mousedown(function(){
    drag($(this));
})

这段代码将把元素直接放在光标所在的位置。它可能不是你想要的，但可以尝试移动元素，而不直接依赖于它以前的位置。

更新：

这个问题要求在点击开始的地方进行1-1的移动。这把小提琴就是这么做的。这个想法是计算拖动开始时从单击位置到框顶部的差异，然后使用该偏移更新位置。

Answer 2

你的数学似乎很奇怪。diff变量的确切意义是什么？

你不只是想：？

ele.css('top', e.pageY);

或

ele.css('top', e.pageY - ele.height() / 2);