div元素的拖放

Question

我在页面上有一个矩形 div 元素，其中包含图像和文本跨度。 Div 有 2px 的边框，使其实际可见。

然后我将 dragstart 事件侦听器添加到我的 div 元素。 如果我开始在 div 中拖动图像，dragstart 事件总是会触发，但如果我通过单击文本跨度或空白位置开始拖动，则会出现非常大的问题：

在谷歌浏览器中拖动非常不稳定。它可以工作几次然后停止发射，然后再次工作，依此类推。 在 Mozilla Firefox 中它根本不起作用。

如何通过单击我的 div 绑定矩形内的任何点来修复它并允许拖动？

<div class="item">
  <img src="https://www.wigwam3d.com/previews/1f/1ffbf8da-a4d0-4e40-b9e1-0329220969dc.jpg">
  <div>Element</div>
</div>

Plunker：http://plnkr.co/edit/673ytif50cViE5dTv3df?p=preview

Answer 1

使用此代码，您可以将 div 拖动到窗口的任何位置。还要修复 div 的宽度和高度。

$(函数(){ $("#animation").css({"cursor":"move"})

// mousedown:fn(){dragging = true;}


var dragging = false;
var iX, iY;
$("#animation").mousedown(function(e) {
    dragging = true;
    iX = e.clientX - this.offsetLeft;
    iY = e.clientY - this.offsetTop;
    this.setCapture && this.setCapture();
    return false;
});

// mouseover:fn(){dragging = tru;}

document.onmousemove = function(e) {
    if (dragging) {
        var e = e || window.event;
        var oX = e.clientX - iX;
        var oY = e.clientY - iY;
        $("#animation").css({"left":oX + "px", "top":oY + "px"});
        return false;
    }
};

// mouseup:fn(){dragging = false;}

$('#animation').mouseup(function(e) {
    dragging = false;
    this.releaseCapture && this.releaseCapture();
    e.cancelBubble = true;
})

})

Answer 2

刚刚找到一个简单的解决方案：在 div 元素上添加属性 draggable=true ！就是这样！