Build jQuery UI Draggable - Revert position in JavaScript

Description

The following code shows how to build jQuery UI Draggable - Revert position.

Example


<!-- Revised from demo code on http://jqueryui.com/ -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Revert position</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<!--   w w w.  j  ava  2 s.c  o  m-->
<style>
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable({ revert: true });
$( "#draggable2" ).draggable({ revert: true, helper: "clone" });
});
</script>
</head>
<body>

<div id="draggable" class="ui-widget-content">
<p>Revert the original</p>
</div>

<div id="draggable2" class="ui-widget-content">
<p>Revert the helper</p>
</div>

<div class="demo-description">
<p>Return the draggable (or it's helper) to its original location when dragging stops with the boolean <code>revert</code> option.</p>
</div>
</body>
</html>

Click to view the demo

The code above generates the following result.

Build jQuery UI Draggable - Revert position in JavaScript

Home »
  Javascript Tutorial »
    jQuery UI »
      Draggable

Javascript Tutorial Draggable
Add border to the draggable in JavaScript
Add dragging stopped event handler in JavaS...
Build jQuery UI Draggable - Auto-scroll in ...
Build jQuery UI Draggable - Constrain movem...
Build jQuery UI Draggable - Cursor style in...
Build jQuery UI Draggable - Default functio...
Build jQuery UI Draggable - Delay start in ...
Build jQuery UI Draggable - Events in JavaS...
Build jQuery UI Draggable - Handles in Java...

Build jQuery UI Draggable - Revert position...

Build jQuery UI Draggable - Snap to element...
Build jQuery UI Draggable + Sortable in Jav...
Build jQuery UI Draggable - Visual feedback...
Build jQuery UI Position - Default function...
Build jQuery UI Position - Image Cycler in ...
Change cursor for draggable tag in JavaScri...
Handle drag and drop events: activate, deac...
Handle drag start and stop events in JavaSc...
Handle droppable accepted event in JavaScri...
Set Drag delay distance in JavaScript
Set cursor position for the draggable in Ja...
Set to Drag along a grid in JavaScript
Set to fly back in JavaScript
Set to only draggable along with axis y in ...
Set to only draggable inside parent in Java...
Snap to another for draggable in JavaScript