Question

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

<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();

HTML5 Draggable属性：阻止帮助程序显示

2 个答案: