I have an element, let's say a div, that I want to be able to drag and drop into another div. If the element isn't dragged into the other div I would like it to animate back to it's initial position. The draggable divs are relatively positioned. So, my question is what's the best approach? Is there a method in jQuery UI which will allow it to animate back? Or am I going to have to write it? If I do, here's my strategy:

1. get coordinates of the draggable div on start of drag using $('#draggableElement').css('left'), and $('#draggableElement').css('top')

2. On drag plete use the jQuery .animate to put it back in place.

Is that strategy correct? Or is there something more efficient I could be doing?

I have an element, let's say a div, that I want to be able to drag and drop into another div. If the element isn't dragged into the other div I would like it to animate back to it's initial position. The draggable divs are relatively positioned. So, my question is what's the best approach? Is there a method in jQuery UI which will allow it to animate back? Or am I going to have to write it? If I do, here's my strategy:

1. get coordinates of the draggable div on start of drag using $('#draggableElement').css('left'), and $('#draggableElement').css('top')

2. On drag plete use the jQuery .animate to put it back in place.

Is that strategy correct? Or is there something more efficient I could be doing?

• javascript
• jquery
• html
• css
• jquery-ui

• 3 jqueryui./demos/droppable/#revert – Ryan Wheale Commented Jul 27, 2012 at 8:43
• You could try using webkit for such stuff, but the ment above answers ur question! – Shouvik Commented Jul 27, 2012 at 8:43
• Thanks Ryan, I could have sworn that wasn't there last week when I checked! – Adam Waite Commented Jul 27, 2012 at 9:19

2 Answers 2

Have a look at this

and maybe the helper of a jquery ui draggable options -> helper.

I think this should help you. If not, please specify your question.

You need to set revert: 'invalid'

example:

$( "#draggablediv" ).draggable({helper : "clone", revert: "invalid" });

the helper:clone makes a clone when you try to drag it, when you dont drop it in the area the revert: "invalid" returns the clone to his start position.

If you want the dragable to return to his position use revert: "true"

Please see http://api.jqueryui./draggable/#option-revert