HTML5拖放不会掉线

Question

玩拖放,虽然我似乎拖得很好,我似乎无法放弃.

这是我的游乐场: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

您已经被HTML5可拖动API 的许多怪癖之一所困扰:您需要将一些数据附加到拖动事件,否则它将被潜在的放置目标忽略.修复是添加行

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

参加dragstart活动.(注意,这e.dataTransfer不起作用,因为jQuery dataTransfer不会复制该属性e,至少从1.7开始.)你操场的工作叉:http://jsfiddle.net/AK2zJ/

请注意,这会给你dragenter和dragover,但不drop...前面提到的文章指出:

对于要发射的掉落事件,您必须取消dragover和dragenter事件的默认值.

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

除了这个kludginess之外,值得一提的是HTML5可拖动API 存在严重缺陷.实际上,使用它(而不是像jQuery UI)的唯一好理由是,如果要在多个浏览器窗口中启用拖放操作.