Я пытаюсь сделать так, чтобы несколько элементов, которые можно перетаскивать, можно было перетащить только на 1 элемент. Если выпадет за пределы капли, вернитесь. Большая часть моего кода работает за исключением одной ошибки:

Пользователь перетаскивает предмет в пипетку. Затем перетаскивает (выполняет функцию out), затем он не может бросить объект сбрасывания (происходит возврат, перетаскивание возвращается к предыдущему состоянию сбрасывания). То, что фактически произошло, - это то, что dropable может теперь принимать любое перетаскивание (так как перетаскивание влево выполняется), в то время как перетаскивание фактически никогда не уходило из-за возврата.

Я пытался решить эту проблему в течение нескольких часов и прошел через API. Я даже пытался использовать функцию обратного вызова для возврата, однако из-за путаницы в том, как извлечь буксируемый объект, я застрял.

 //revert if not dragged to a draggable.
 $( "[id|=drag]" ).draggable({ revert: 'invalid', revertDuration: 350 }); 

$( ".dropZone" ).droppable({

    drop: function(ev,ui) {
      $(this).droppable('option', 'accept', ui.draggable); //only accept the current drag.
    },
    out: function(ev, ui) {
      $(this).droppable('option', 'accept', '[id|=drag]');//now you can accept any drag.
     }
});

jsFiddle:http://jsfiddle.net/tG6cj/