JQuery перетаскивается изнутри-из-под защитой

Question

вместо того, чтобы содержать защитный элемент вокруг него, как я могу его использовать внутри него? Таким образом, вы можете перетаскивать элемент где угодно, пока его края не сталкиваются с элементом внутри него?

Answer 1

Один из подходов состоит в том, чтобы использовать событие drag и обновить поля ui.position или ui.offset, чтобы вручную ограничить предмет.

Here - это jsfiddle, чтобы проиллюстрировать концепцию, хотя это не полностью реализует то, что вы описываете.

Answer 2

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

Container.height = (Draggable.height - Restrict.height) + Draggable.height 
Container.width = (Draggable.width - Restrict.width) + Draggable.width 

Затем, вы также должны противостоять тащит движение так, что содержащийся элемент ограничения, кажется, не двигаться когда перемещаемый элемент перемещается. Либо это, либо неподвижная секция может быть плавающим div.

Answer 3

Если это кому-то еще интересно, используя код и логику Расти here's a JSfiddle link.

Answer 4

Основываясь на ответе @ RustyTheBoyRobot, вы также можете выполнить только в CSS, если известны размеры вашего перетаскиваемого.

Живой пример - jsbin.com/agovex

Очевидным недостатком этого является то, если вы хотите использовать это в нескольких ситуациях, это не будет работать, так как значения зашиты в CSS. Но если вам это нужно только для одной вещи с известными измерениями, я нахожу CSS только простым и элегантным. Для создания draggable существует только одна строка JavaScript.