如何用鼠标向上/移动使可拖动的对象？

Question

我知道如何使用"mouseup/down/move“在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，og使用这个JS：

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

Answer 2

jQuery为您提供了用户为其所有鼠标处理功能单击的对象。回调函数的当前作用域(this)自动设置为该对象。

因此，如果您用这里的代码交换mousemove处理程序，它应该可以做到：

$(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/