javascript - HTML5 dragend 事件立即触发

Question

我有几个可拖动的元素

<div Class="question-item" draggable="true">Box 1: Milk was a bad choice.</div>
<div class="question-item" draggable="true">Box 2: I'm Ron Burgundy?</div>
<div class="question-item" draggable="true">Box 3: You ate the entire wheel of cheese?     </div>
<div class="question-item" draggable="true">Box 4: Scotch scotch scotch</div>

我有以下事件处理程序:

var $questionItems = $('.question-item');

$questionItems
  .on('dragstart', startDrag)
  .on('dragend', removeDropSpaces)
  .on('dragenter', toggleDropStyles)
  .on('dragleave', toggleDropStyles);


function startDrag(e){
  console.log('dragging...');
  addDropSpaces();
  e.stopPropagation();
}

function toggleDropStyles(){
  $(this).toggleClass('drag-over');
  console.log(this);
}


function addDropSpaces(){
  $questionItems.after('<div class="empty-drop-target"></div>');
}

function removeDropSpaces(){
  console.log("dragend");
  $('.empty-drop-target').remove()
}

为什么它只适用于第一个可拖动对象。如果我拖动说最后一个可拖动 - 立即触发 dragend 事件。 (顺便说一句，我不想​​使用 jQuery UI)

这对我来说毫无意义 - 它看起来像一个错误。

我在 OSX 上使用 Chrome v 30。

这是 JSFiddle 的链接:http://jsfiddle.net/joergd/zGSpP/17/

(编辑:这是对以下问题的重复:dragend, dragenter, and dragleave firing off immediately when I drag - 但我认为原始海报可以与 jQuery UI 一起使用，而我希望它是 HTML5 原生的)

Answer 1

正如我在主题 dragend, dragenter, and dragleave firing off immediately when I drag 中提到的，对我来说解决问题(看起来是 Chrome 错误)的方法是在处理程序中添加 10 毫秒的 setTimeout 并在该超时内操作 DOM。