5

玩拖放，虽然我似乎可以很好地拖动，但我似乎无法放下。

这是我的游乐场：http: //jsfiddle.net/KZ8RD/1/

基本上，可拖动节点上的dragstartanddragend事件似乎可以正常触发。但我还没有触发该目标节点上的任何事件。

# Source handlers
$('#source')
  .on('dragstart', (e) -> log '#source dragstart', this, e)
  .on('dragend',   (e) -> log '#source dragend',   this, e)

# Target Handlers
$('#cells td')
  .on('dragenter', (e) -> log 'target dragenter',  this, e)
  .on('dragleave', (e) -> log 'target dragleave',  this, e)
  .on('dragover',  (e) -> log 'target dragover',   this, e)
  .on('drop',      (e) -> log 'target drop',       this, e)​​​

dragenter那么触发目标和drop事件需要哪些条件呢？我显然错过了其中一些。

4

1 回答 1

6

您已经被 HTML5 可拖动 API 的众多怪癖之一所困扰：您需要将一些数据附加到拖动事件，否则它将被潜在的放置目标忽略。解决方法是添加该行

e.originalEvent.dataTransfer.setData 'text/html', 'foo'

到dragstart事件。（请注意，这e.dataTransfer不起作用，因为jQuerydataTransfer没有将属性复制到该属性上e，至少从 1.7 开始。）您的游乐场的工作分支：http: //jsfiddle.net/AK2zJ/

请注意，这会给您dragenterand dragover，但不会drop... 正如上述文章指出的那样：

要完全触发 drop 事件，您必须取消 dragover 和 dragenter 事件的默认设置。

您可以通过false从这些事件中的每一个返回来在 jQuery 中执行此操作。这里也是一个修改的例子，允许drop事件发生：http: //jsfiddle.net/YaEBj/

除了这种笨拙之外，值得一提的是 HTML5 可拖动 API 中存在严重缺陷。确实，使用它（而不是像 jQuery UI 之类的东西）的唯一充分理由是，如果您想在多个浏览器窗口中启用拖放操作。

于 2012-07-19T22:39:33.483 回答