javascript - HTML5 拖放不掉

Question

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

这是我的 Playground : http://jsfiddle.net/KZ8RD/1/

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

# 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 事件需要满足什么条件才能触发？我显然遗漏了其中一些。

Answer 1

你被其中一只 many quirks 咬过HTML5 可拖动 API:您需要将一些数据附加到拖动事件，否则它会被潜在的放置目标忽略。解决方法是添加行

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

到 dragstart 事件。 (请注意，e.dataTransfer 将不起作用，因为 jQuery 不会将 dataTransfer 属性复制到 e 上，至少从 1.7 开始是这样。 ) 你的 Playground 的工作叉:http://jsfiddle.net/AK2zJ/

请注意，这将为您提供 dragenter 和 dragover，但不会为您提供 drop... 正如上述文章所指出的:

For the drop event to fire at all, you have to cancel the defaults of both the dragover and the dragenter event.

您可以在 jQuery 中通过从每个事件返回 false 来完成此操作。下面是一个同样进行修改的示例，它允许发生 drop 事件:http://jsfiddle.net/YaEBj/

除了这个笨拙之外，值得一提的是还有serious flaws在 HTML5 可拖动 API 中。确实，使用它(而不是像 jQuery UI 之类的东西)的唯一充分理由是，如果您想跨多个浏览器窗口启用拖放操作。