Пожалуйста, порекомендуйте плагин JQuery, который обрабатывает обнаружение столкновений для перетаскиваемых элементов.

Question

Мы используем плагин Draggable JQuery UI и должны запретить перекрытие между нашими элементами. Мы могли бы написать некоторое обнаружение столкновений самостоятельно, но предпочли бы использовать проверенный пакет. Какие-либо предложения?

Answer 1

Вы можете попробовать jquery-collision плюс jquery-ui-draggable-collision. Полное раскрытие: я только что написал и выпустил их на sourceforge.

Первый позволяет это:

var hit_list = $("#collider").collision(".obstacle");

это список всех ".obstacle", которые перекрывают "#collider".

Второй позволяет:

$("#collider").draggable( { obstacle: ".obstacle" } );

Что дает вам (помимо всего прочего) событие "столкновения" для привязки к:

$("#collider").bind( "collision", function(event,ui){...} );

И вы даже можете установить:

$("#collider").draggable( { obstacle: ".obstacle", preventCollision: true } );

для предотвращения "#collider" когда-либо перекрывать любой ".obstacle" при перетаскивании.

Answer 2

Появляется быстрый поиск плагинов jQuery:

Складные Draggables

Похоже, еще рано, но, возможно, стоит проверить.

Answer 3

Я знаю, что этот вопрос довольно старый, но, может быть, вы найдете его полезным: наш плагин Collision Check для jQuery.

Описание на немецком языке, но оно должно быть самоочевидным. Вы можете использовать два отдельных элемента или даже наборы элементов и получить обратно набор всех сталкивающихся элементов.

Answer 4

Google сообщает мне, что плагин JQuery gameQuery имеет функцию "столкновения":

http://gamequery.onaluf.org/

Найдите слово "столкновение" на странице выше.

Этот поиск Google может дать вам несколько других вариантов:

http://www.google.com/search?q=jquery+collision+detection

Answer 5

Предположим, но я думаю, что вам нужно будет найти здесь:

$.event.special.drop

Он использует известный jQuery $.event.special.drag для создания события удаления. Вы можете поместить свой собственный код JavaScript под .bind( "drop", function( event ){элемент this внутри этой функции представляет объект с классом "drop", который вы определили, а event.dragTarget - объект, который перетаскивается.

Больше документов на сайте, указанном выше. Это было то, что мне было нужно в любом случае.