Я пытаюсь составить список элементов, которые могут быть перемещены путем перетаскивания. Первый элемент, 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('');
  console.log('drop spaces added');
}

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

Вот'с HTML:

Box 1: Milk was a bad choice.
Box 2: I'm Ron Burgundy?
Box 3: You ate the entire wheel of cheese?
Box 4: Scotch scotch scotch

Вот jsFiddle моего кода:http://jsfiddle.net/zGSpP/5/