为什么HTML5拖放不在Firefox中工作？

Question

我已将事件绑定到不同的元素,当我在除Firefox之外的所有浏览器中拖动它时,它按预期工作.但是,在Firefox中,它根本不起作用.唯一发生火灾的事件是dragstart,其他事件都没有发生.这是怎么回事？

Answer 1

Firefox要求用户dataTransfer.setData在事件中运行该功能.

对于您的jQuery用户,这意味着以下代码应解决您的问题:

function dragstartHandler(event){

  event.originalEvent.dataTransfer.setData('text/plain', 'anything');

}

现在,相同阻力的未来事件将按预期正常启动.显然,您可以setData使用更有用的数据替换参数.

如果您希望它在IE中工作,请使用"text"而不是"text/plain".请参阅http://stackoverflow.com/questions/12803235/drag-and-drop-not-working-in-ie-javascript-html5 (2认同)
因此,Firefox中的一个错误会强制您设置拖拽启动事件的数据. (2认同)

Answer 2

我没有使用jQuery,所以删除了原始事件部分并将格式更改为文本(或IE有问题),它的工作原理如下:

event.dataTransfer.setData('text', 'anything');

在drop事件中,请务必致电:

event.preventDefault();

或者它会跳转到anything.com.

Answer 3

FF有一些长期存在的问题,即吃掉某些鼠标事件,这些事件源自溢出设置为自动或滚动的元素.

在我的情况下,我有一个很好用的拖放库,在样本和我的应用程序中完美地工作在每个浏览器,但Firefox.在深入了解与此相关的门票后,我找到了一个解决方案,我完全赞同这张票的贡献者https://bugzilla.mozilla.org/show_bug.cgi?id=339293

这是设置-moz-user-select:none

在被拖动的滚动元素上.它解决了我的特殊问题.