javascript - HTML5 Draggable 属性：防止助手出现

Question

我制作了这个小脚本来使用dragabbleHTML5 中的属性创建一个可拖动的 DIV，一切正常，除了在拖动结束时显示的帮助程序。有没有办法防止这种情况？

http://jsfiddle.net/ubugnu/66AVB/

<div id="toBeDragged" style="position: absolute;" draggable="true">
  This text <strong>may</strong> be dragged.
</div>

<script>
document.getElementById('toBeDragged').addEventListener('dragstart', function(event) {
    X = event.offsetX;
    Y = event.offsetY;
});
document.getElementById('toBeDragged').addEventListener('drag', function(event) {
    this.style.left = event.pageX - X + 'px';
    this.style.top = event.pageY - Y + 'px';
});
</script>

编辑：它似乎不适用于 Firefox！任何人都知道为什么它不起作用？

Answer 1

查看有关拖动开始的MDN文档。

您需要设置一些拖动数据，以便 Firefox 知道如何显示拖动信息。它在其他浏览器中工作是非标准的。

我通过添加更新了你的小提琴

event.dataTransfer.setData('text/html', 'This text <strong>may</strong> be dragged');

到您的 dragStart 事件。

看看这是否是你想要的行为：http: //jsfiddle.net/66AVB/1/

Answer 2

如果可以使用 jquery，为什么不直接使用 jquery ui。

http://jsfiddle.net/66AVB/2/

您需要的所有代码都是这样的：

$('#toBeDragged').draggable();