Ограничить перетаскиваемые объекты jQuery из перекрытия / столкновения с элементами-братьями

Мне нужно использовать jQuery UI, чтобы ограничить область сдерживания для объекта с drag and dropм с некоторым дополнительным ограничением. Мне нужно, чтобы перетаскиваемый элемент перекрывался с другими элементами внутри одного контейнера. Мне нужно разрешить движение в области «moveInHere», но не «butNotHere». Является ли это возможным?

$("#dragMe").draggable({ containment: "#moveInHere" });

Изменить: новое решение

Я нашел плагин для этого под названием JQuery UI Draggable Collision . Используя это, реализация желаемой функциональности становится тривиальной. См. Следующий пример jsFiddle: http://jsfiddle.net/q3x8w03y/1/ (для этого используется версия 1.0.2 JQuery UI Draggable Collision, а также JQuery 1.7.2 и JQueryUI 1.1.18.)

Вот код:

 $("#dragMe").draggable({ obstacle: "#butNotHere", preventCollision: true, containment: "#moveInHere" }); 

Старое решение

Следующее должно работать. Тем не менее, у него есть сбой. Как только divs сталкиваются, вы должны «переписать» div, который вы перетаскиваете, что может быть немного раздражающим. Возможно, кто-то еще будет знать, как это исправить. Вы можете увидеть мой пример jsFiddle: http://jsfiddle.net/MrAdE/8/

 var prevOffset, curOffset; $("#dragMe").draggable({ drag: function(e,ui) { prevOffset= curOffset; curOffset= $.extend({},ui.offset); return true; } }); $("#butNotHere").droppable({ greedy: true, over: function(e,ui) { ui.helper.offset(curOffset= prevOffset).trigger("mouseup"); }, tolerance: "touch" });​ 

Мне это заняло немало времени. В основном я создал droppable на элементе, которого вы хотите избежать, затем установите логическое значение, когда перетащить его. Затем я использую это в недокументированной функции отмены возврата, чтобы отменить падение. Он работает только в том случае, если #dragMe полностью перегружен #butNotHere :

 $(document).ready(function(){ var shouldCancel = false; $('#dragMe').draggable({ containment: '#moveInHere', revert: function(){ if (shouldCancel) { shouldCancel = false; return true; } else { return false; } } }); $('#butNotHere').droppable({ over: function(){ shouldCancel = true; }, out: function(){ shouldCancel = false; } }); }); 

Просмотрите рабочую демонстрацию и не стесняйтесь играть с ней: http://jsfiddle.net/H59Nb/31/

Interesting Posts

Может ли Java-массив использоваться как ключ HashMap

Перенаправление портов после NAT класса несущей?

Преобразование String в System.IO.Stream

Как запустить «ifconfig wlan0 down / up» с помощью комманда?

При запуске экрана в OSX команда + r запускает клавиши со стрелками в vim на всех экранах

Программно зарегистрировать широковещательный приемник

Firestore: Как получить случайные документы в коллекции

Как SQL Server сортирует ваши данные?

2.5 "SSD в 3.5" отсеке для настольных ПК?

Могу ли я добавлять и удалять элементы enums во время выполнения в Java

ggplot2 – бар с обоими стопами и уклоном

Почему ваш тип данных оператора switch не может быть длинным, Java?

Плагин jQuery Validation: отключить проверку для указанных кнопок отправки

Как вы можете заставить VB6 использовать библиотеки DLL и OCX из каталога приложений?

Как синхронизировать SkyDrive / OneDrive в Windows 8.1 при входе на ПК с локальной учетной записью?

Давайте будем гением компьютера.