javascript - 当我拖动时，dragend、dragenter 和 dragleave 会立即发射

Question

我正在尝试制作一个可以通过拖放重新定位的元素列表。第一个元素 Box 1 在 100% 的时间里工作得很好。有时第二个盒子工作，但其他盒子都没有按预期工作。一旦您开始拖动它们，它们似乎会立即触发所有拖动事件。

如果重要的话，我正在使用最新的 Chrome (v23)。

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

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


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

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


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

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

这是 HTML:

<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>

这是我的代码的 jsFiddle:http://jsfiddle.net/zGSpP/5/

Answer 1

刚才有这个问题 - 这是一个 Chrome 错误，你不能在 dragStart 事件中操作 DOM，否则 dragEnd 会立即触发。我的解决方案原来是 - 使用 setTimeout() 并在超时函数内操作 DOM。