Question

使用拖放操作，虽然我似乎拖得很好，但我似乎无法放弃。

基本上，可拖动节点上的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的many quirks之一咬了一下：您需要将一些数据附加到拖动事件，否则潜在的放置目标会忽略它。修复是添加行

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

到dragstart事件。（请注意，e.dataTransfer不起作用，因为dataTransfer属性未被jQuery复制到e，至少从1.7开始。）操场的工作叉：{{3} }

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

对于要发射的掉落事件，你必须取消dragover和dragenter事件的默认值。

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

除了这个kludginess之外，值得一提的是HTML5可拖动API中有http://jsfiddle.net/YaEBj/。真的，使用它的唯一好理由（而不是像jQuery UI这样的东西）是你想在多个浏览器窗口中启用拖放操作。

HTML5拖放不会掉线

1 个答案: