Question

我有一个带有属性

的普通div

div{
    height: 50px;
    width: 50px;
    background-color: red;
}

我希望能够被拖拽。通过拖拽，我的意思是：只要你的鼠标被点击到div上，就会跟随你的鼠标，当你松开鼠标时，它就会停留在你让它移动的位置。

非常感谢任何能提供帮助的人！

http://jsfiddle.net/aritro33/k9DGH/

Answer 1

http://jsfiddle.net/k9DGH/9/

有一些JQuery（需要JQuery UI）：

$('div').draggable();

Answer 2

快速而有点肮脏的解决方案如下所示：

让我们设置一下html：

<div class='drag-container'>
    <div class='draggable'></div>
</div>

这里我将div包装在另一个div中，以便它可以设置position:relative。您可以选择在body上设置此项。您可以将其设置为内联或CSS，但在代码中执行此操作可能更为自然。

var refx = 0, refy = 0, isdragging = false;
$(".drag-container").css("position", "relative");
$(".draggable").css({left:0, top:0})
  .on("mousedown", function(evt) {
    isdragging = true;
    var src = $(event.target).closest('.draggable');
    refx = evt.pageX - parseInt(src.css("left"));
    refy = evt.pageY - parseInt(src.css("top"));
}).on("mousemove", function(evt){
    if(!isdragging) return;
    var dx = evt.pageX - refx;
    var dy = evt.pageY - refy;
    console.log(dx, dy);
    $(event.target)
        .closest('.draggable')
        .css({left:dx + "px", top: dy + "px"});
}).on("mouseup mouseout click dbclick mousein", function(){
    isdragging = false;
});

这里唯一奇怪的是许多处理程序停止拖动。我发现在一些极端情况下大多数都需要它们。

您可以在此jsfiddle中看到预期的功能。

使div可以在屏幕上拖动

2 个答案: