如何使用mouseup/move製作可拖動的對象？

Question

我知道如何使一個拖動對象與「鼠標鬆開/下/移動」 jQuery的，但我想不出如何做到這一點的多個對象。我的主要問題是如何選擇的對象，我點擊了。

這裏是我的一個目標代碼：

CSS

#hi { 
width: 200px; 
height: 200px; 
background-color: red; 
position:absolute; 
} 

jQuery的

$(function(){ 
var click = false; 
$('#hi').mousedown(function() 
{ 
    click = true; 
    console.log(click); 
}); 
$('#hi').mouseup(function() 
{ 
    click = false; 
    console.log(click); 
}); 

$(window).mousemove(function(e) 
{ 
    if(click == true) 
    { 
     $('#hi').css('top',e.pageY); 
     $('#hi').css('left',e.pageX); 
    } 
}); 
}); 

HTML

<div id="hi"></div> 

任何幫助嗎？

Answer 1

簡單使用jQuery UI做：http://jqueryui.com/draggable/

讓你HTML和CSS，或使用JS：

$(function() { 
    $("#hi").draggable(); 
}); 

Answer 2

jQuery方便地爲您提供了用戶單擊其所有鼠標處理函數的對象。回調函數的當前範圍（this）會自動設置爲該對象。

因此，如果您使用此代碼交換你的鼠標移動處理器在這裏，它應該做的伎倆：

$(window).mousemove(function(e) 
{ 
    if(click == true) 
    { 
     $(this).css('top',e.pageY); 
     $(this).css('left',e.pageX); 
    } 
}); 

此外，如果你想爲拖動對象一個完整的和易於使用的解決方案，嘗試的jQuery UI的可拖動：http://jqueryui.com/draggable/

Answer 3

我建議在看jQuery的可拖動庫：http://jqueryui.com/draggable/