make draggable elements stop on div-border

Asked May 27 '13 at 16:03

Active May 27 '13 at 16:11

Viewed 577 times

In my body I have a few images in a wrapper div:

<div id="wrapper">
    <img src="1.png" id="img1" />
    <img src="2.png" id="img2" />
    <img src="3.png" id="img3" />
</div>

which are all draggable with jQueryUI:

var $images = $('#img1, #img2, #img3')
    $images.draggable({ start: dragStart,
                        cursor: 'move',
                        stop: dragEnd });

All elements are position: absolute; and the wrapper has a fixed width: 1000px; height: 800px
What I would like to know is if its possible to stop the dragging when the img collides with the end of div and fire an event if it collides.

edited May 27 '13 at 16:11

Carrie Kendall

11,124
5
61
81

asked May 27 '13 at 16:03

supersize

13,764
18
74
133

1

Have you tried `containment` option http://api.jqueryui.com/draggable/#option-containment ? – Yury Tarabanko May 27 '13 at 16:10
http://stackoverflow.com/questions/3237161/jquery-draggable-how-to-limit-the-draggable-area – igor May 27 '13 at 16:16
but how can i fire an event when drag against the end? – supersize May 27 '13 at 16:21

make draggable elements stop on div-border

0 Answers0