Javascript 如何使用mouseup/move创建可拖动对象？

我知道如何在jquery中使用“mouseup/down/move”创建一个可拖动的对象，但我不知道如何为多个对象创建该对象。我的主要问题是如何选择单击的对象

以下是一个对象的代码：

css

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

---

有什么帮助吗？

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

因此，如果您在此处使用此代码交换mousemove处理程序，它应该可以实现以下功能：

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

---

此外，如果您想要一个完整且易于使用的对象拖动解决方案，请尝试jQuery UI的可拖动功能：

我建议查看jQuery可拖动功能库：

简单使用jQuery UI完成：

保持HTML和CSS，使用以下JS：

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

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

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