CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-draggable
FurtiveFelon
FurtiveFelon

Reputation: 15166

how to drag image inside frame with jqueryui draggable

I have the following page: http://jsfiddle.net/DerNa/

What i want to do is constrain the image inside the frame (so that when you move the image away from borders, it would prevent it). Initially i tried this: http://jsfiddle.net/DerNa/1/

After it not working, i then tried to do this: http://jsfiddle.net/DerNa/2/

but returning false would just cancel dragging for good for some reason. I just want it to cancel that particular drag action.

Anyone have any ideas?

Thanks a lot!

Upvotes: 0

Views: 1725

Answers (1)

JP _
JP _

Reputation: 570

Use an array coordinate value for containment:

$('img').draggable({containment:[x1,y1,x2,y2]})​;

In your fiddler example, you can use:

$('img').draggable({containment:[-300,-300,0,0]})​;

Here's the solution in jsfiddle: http://jsfiddle.net/DerNa/3/

Added explanation as requested:

x1, y1 is the min left, top that your element can be dragged to
x2, y2 is the max left, top that your element can be dragged to

Upvotes: 2

Related Questions