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的Draggable：http://jqueryui.com/draggable/

Answer 3

我建议查看jQuery Draggable库：http://jqueryui.com/draggable/

如何用mouseup / move制作可拖动的对象？

3 个答案: