Я пытаюсь составить список элементов, которые могут быть перемещены путем перетаскивания. Первый элемент, 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/