爲什麼這個簡單的拖放代碼會導致元素閃爍？

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'); 
    }); 
} 

它工作得很好，但有時它開始通過小的變化和差異變量閃爍跳動。我不知道是什麼可能導致這種情況，也許是別人呢？

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運動在點擊開始的問題。 This fiddle這樣做。這個想法是在拖動開始時計算從點擊位置到盒子頂部的差異，然後使用該偏移更新位置。

Answer 2

你的數學看起來很奇怪。 diff變量的意義究竟是什麼？

難道你只是想：？

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

或

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