Если вы хотите вернуть элемент в исходную позицию, если он не помещен в элемент #droppable, просто сохраните исходный родительский элемент перетаскиваемого элемента в начале скрипта (вместо позиции), и если вы убедитесь, что он не вставлен в #droppable, а затем просто восстановите родительский элемент #draggable для этого исходного элемента.
Итак, замените это:
}).each(function() {
var top = $(this).position().top;
var left = $(this).position().left;
$(this).data('orgTop', top);
$(this).data('orgLeft', left);
});
с этим:
}).each(function() {
$(this).data('originalParent', $(this).parent())
});
Здесь у вас будет исходный родительский элемент перетаскиваемого объекта. Теперь вы должны восстановить его родителя в точный момент.
drop вызывается каждый раз, когда элемент вытаскивается из предмета, а не на остановке. Итак, вы добавляете много обратных вызовов событий. Это неправильно, потому что вы никогда не очищаете событие mouseup. Хорошее место, где вы можете подключить обратный вызов и проверить, был ли элемент пропущен внутри или снаружи элемента #droppable, это revert, и вы делаете это прямо сейчас, поэтому просто удалите обратный вызов drop.
Когда элемент отброшен и ему нужно знать, следует ли его вернуть или нет, вы точно знаете, что у вас не будет никакого другого взаимодействия с пользователем до начала нового перетаскивания. Итак, используя то же условие, которое вы используете, чтобы узнать, должно ли оно вернуться или узнать, давайте заменим этот alert фрагментом кода, который: восстанавливает исходный элемент в исходном div и сбрасывает originalPosition из draggable внутренности. Свойство originalPosition устанавливается во время _mouseStart, поэтому, если вы меняете владельца элемента, вы должны сбросить его, чтобы анимация возврата вернулась в нужное место. Итак, давайте установим это на {top: 0, left: 0}, заставляя анимацию идти в исходную точку элемента:
revert: function(dropped) {
var dropped = dropped && dropped[0].id == "droppable";
if(!dropped) {
$(this).data("draggable").originalPosition = {top:0, left:0}
$(this).appendTo($(this).data('originalParent'))
}
return !dropped;
}
И это все! Вы можете проверить эту работу здесь: http://jsfiddle.net/eUs3e/1/
Примите во внимание, что, если в каком-либо обновлении пользовательского интерфейса jQuery поведение revert или originalPosition изменится, вам потребуется обновить код, чтобы он работал. Имейте в виду, что.
Если вам нужно решение, в котором не используются вызовы внутренних компонентов ui.draggable, вы можете сделать свой body опускаемым элементом с опцией greedy, определенной как false. Вам нужно убедиться, что ваши body элементы занимают весь экран.
Удачи!