jQuery UI. DnD от sortable to droppable (из списка) нестабилен (не падает каждый раз)

Question

Я пытаюсь повторно использовать «сортируемую» функцию в сочетании с «droppable». Но при перетаскивании с sortabledrop событие не происходит на каждой капле. Вот пример кода:

$(".sortable tbody").sortable({ 
    start: function(ev, ui) { 
     console.log("start"); 
     var id = ui.item.children()[0].textContent; 
     $(ui.item).data("id", id); 
    }, 
    opacity: 0.5 
}); 
$(".droppable").droppable({ 
    drop: function(ev, ui) { 
     console.log("drop"); 
     this.value = $(ui.draggable).data("id"); 
    } 
}) 

JSFiddle http://jsfiddle.net/27bom9sb/

Что здесь не так и есть лучший способ к соединению их?

ОБНОВЛЕНИЕ

После некоторых дополнительных испытаний было установлено, что падение стабильности зависит от перетаскиваемой строки Lenth:

Вот пример с короткими рядами (стабильный): http://jsfiddle.net/usv496dm/1/

Тем же самый примером, но с длинным текстом строки (нестабильным): http://jsfiddle.net/usv496dm/2/

Я понятия не имею, почему стабильность зависит от длины строки, но теперь Я думаю, что это неправильный способ использования sortable + droppable.

Answer 1

Используйте этот скрипт

Использование tolerance property для Droppable.

Установить свойство допуска на "касание" или "указатель".

<script> 
     $(function() { 

      $(".sortable tbody").sortable({ 
       start: function (ev, ui) { 
        var id = ui.item.children()[0].textContent; 
        $(ui.item).data("id", id); 
       } 
      }); 

      $(".droppable").droppable({ 
       tolerance: "touch", 
       drop: function (ev, ui) { 
        console.log("drop"); 
        this.value = $(ui.draggable).data("id"); 
       } 
      }) 
     }); 
    </script> 

работал для меня. Надеюсь, что это поможет