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()
}

为什么它只适用于第一个可拖动的.如果我拖动说最后一个draggable - dragend事件立即被触发.(我不想使用jQuery UI btw)

这对我来说毫无意义 - 它看起来像一个bug.

我在OSX上的Chrome v 30上.

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

(编辑:这是以下问题的重复:dragend,dragenter和dragleave在我拖动时立即开火 - 但我认为原始海报很好用jQuery UI,而我希望它是HTML5原生的)

Answer 1

正如我在主题dragend,dragenter和dragleave中提到的那样,当我拖动时,我立刻解决了问题(这看起来像是一个Chrome错误)对我来说是在处理程序中添加10毫秒的setTimeout并操纵DOM超时.

Answer 2

我没有直接的解决方案,但是在dragStart事件处理程序中更改DOM会导致此问题,并且任何更改DOM的代码都应该放在dragEnter事件处理程序中 - 这样,拖放事件会更可靠地触发.

不确定这是否是设计 - 虽然感觉有点像一个bug.

Answer 3

这是一个已知的 chrome 问题。问题是，正如 Joerg 提到的，您在 dragstart 上操作 dom。

您可以这样做，但您需要在超时时间内进行。