CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-draggable
Heidel
Heidel

Reputation: 3254

jQuery UI save position of draggable element

Is there any way to save the initial position of draggable element, determine position in the end of drag and return element to initial position after that?

Upvotes: 0

Views: 1059

Answers (1)

Dekel
Dekel

Reputation: 62536

You can use the stop event and the originalPosition value of the ui parameter to get original position.

Once you have the original position - you can move the element to that position using $(this).animate with the values of originalPosition

Here is an example of that:

$( ".drag" ).draggable({
  stop: function( event, ui ) {
    console.log(ui.originalPosition)
    $(this).animate(ui.originalPosition)
  }
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>

<div style="width: 50px; height: 50px; border: 1px solid red;" class="drag"> Drag Me! </div>
<div style="width: 50px; height: 50px; border: 1px solid green;" class="drag"> Drag Me! </div>

Upvotes: 1

Related Questions