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的宽度和高度。

$（函数（）{ $（ “＃动画”）的CSS（{ “光标”： “移动”}）

// 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！这就是全部！

拖放div元素

2 个答案: