JqueryUI Draggable Containment: Как ИСКЛЮЧИТЬ область или элемент

Question

JqueryUI Draggable Containment: Как ИСКЛЮЧИТЬ область или элемент

0

Представьте, что у меня есть перетаскиваемый элемент (myLittleBrother), который содержится в родительском (ourHouse).

Перетаскиваемый элемент может перемещаться всюду, ЗА ИСКЛЮЧЕНИЕМ, в пространство элемента sibling (myRoom).

Как я могу организовать jqueryUI, чтобы исключить область внутри основной области защиты?

HTML

<div id="ourHouse"  >
    <div id="myLittleBrother"></div>
    <div  id="myRoom" ></div>
</div>

JS

$("#myLittleBrother").draggable({ 
        containment: "parent" BUT NOT myRoom...
});

Gamemorize 02 июнь 2014, в 19:11

Источник

Теги:

jquery

jquery-ui

3 ответа

Ещё вопросы

jwags · Answer 1 · 2014-06-02T16-30-00.000Z

Самый простой способ добиться этого - использовать существующий плагин. JQuery UI Draggable Collision похоже, что он работает хорошо. Вы захотите использовать опцию preventCollision, имея в виду, что вам нужно, чтобы братья и сестры не начинали притираться.

Если вы не заинтересованы в использовании плагина, вы можете использовать виджет jQuery droppable и прослушивать событие over, а затем установить специальное значение для параметра сдерживания, чтобы предотвратить перетаскивание, если конфликт не разрешен. Но это потребует некоторой тяжелой логики вокруг операций в доме.

Спасибо, я пытаюсь подключить плагин. Но я получаю "Uncaught TypeError: Невозможно прочитать 'options' свойства undefined" @ "jquery-ui-draggable-collision-min.js: 59", поэтому у меня есть чтобы увидеть, в чем проблема ... так что я пока не могу принять ответ !!
Я быстро посмотрел, но мой js / jquery недостаточно хорош, чтобы решить проблему с плагином

Ben · Answer 2 · 2016-03-30T11-20-00.000Z

В ответ на вклад @jwags решение довольно просто. По-видимому, jQuery в какой-то момент времени переименовал "draggable" в "ui-draggable", и ошибка просто заключается в том, что этот селектор не найден. Таким образом, поиск и замена данных ("перетаскиваемый") на данные ("ui-draggable") решает эту проблему в исходном коде.

Вместо того, чтобы насмехаться над спасибо stackoverflow и неправильно использовать ответ для комментирования, получите еще немного репутации. meta.stackoverflow.com/questions/258610/...

Gamemorize · Answer 3 · 2014-06-02T18-42-00.000Z

Мое окончательное решение (в моей конкретной ситуации) заключалось в том, чтобы снабдить функцию перетаскивания перенаправлением для любых перетаскиваемых элементов, которые были там взяты....

drag: function() {
  if (inside the element){
    Place outside via saved CSS properties;
  }
}

Таким образом, элемент перетаскивания войдет в область, но не может быть сохранен, чтобы оставаться там, так как сохраненные значения всегда будут находиться вне области выделения. Это obvioulsy не полезно для многих, кто хочет заблокировать фактический вход и/или не интересуется сохраненными свойствами данных, а вместо этого выглядит на экране.

Кроме того, как бы то ни было.. Я не буду беспокоиться о том, откуда появился элемент перетаскивания, поэтому он будет перемещаться очень странно и перемещаться в случайное место... Не красиво. Поэтому я не буду принимать свой собственный ответ, но предлагаю его в качестве отправной точки для взлома.