HTML5 拖放不会掉落

Posted 2023-03-03

【中文标题】HTML5 拖放不会掉落

【英文标题】：HTML5 drag and drop wont drop

【发布时间】：2012-07-19 04:30:39

【问题描述】：

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

这是我的游乐场： 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 事件需要存在哪些条件？我显然错过了其中的一些。

【参考方案1】：

您已被 html5 可拖动 API 的 many quirks 之一咬伤：您需要将一些数据附加到拖动事件，否则它会被潜在的放置目标忽略。解决方法是添加行

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

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

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

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

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

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

【讨论】：

有趣...这种数据并不总是需要做你想做的事，所以要求它似乎很奇怪。另外，现在drop 不会触发（实际上会触发dragleave (wtf)），但这可能完全是另一个问题。