Build jQuery UI Draggable - Snap to element or grid in JavaScript

Description

The following code shows how to build jQuery UI Draggable - Snap to element or grid.

Example


<!-- Revised from demo code on http://jqueryui.com/ -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Snap to element or grid</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" />
<!--from   ww  w .jav  a  2 s  .  c o m-->
<style>
.draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }
.ui-widget-header p, .ui-widget-content p { margin: 0; }
#snaptarget { height: 140px; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable({ snap: true });
$( "#draggable2" ).draggable({ snap: ".ui-widget-header" });
$( "#draggable3" ).draggable({ snap: ".ui-widget-header", snapMode: "outer" });
$( "#draggable4" ).draggable({ grid: [ 20, 20 ] });
$( "#draggable5" ).draggable({ grid: [ 80, 80 ] });
});
</script>
</head>
<body>

<div id="snaptarget" class="ui-widget-header">
<p>I'm a snap target</p>
</div>

<br style="clear:both" />

<div id="draggable" class="draggable ui-widget-content">
<p>Default (snap: true), snaps to all other draggable elements</p>
</div>

<div id="draggable2" class="draggable ui-widget-content">
<p>I only snap to the big box</p>
</div>

<div id="draggable3" class="draggable ui-widget-content">
<p>I only snap to the outer edges of the big box</p>
</div>

<div id="draggable4" class="draggable ui-widget-content">
<p>I snap to a 20 x 20 grid</p>
</div>

<div id="draggable5" class="draggable ui-widget-content">
<p>I snap to a 80 x 80 grid</p>
</div>

<div class="demo-description">
<p>Snap the draggable to the inner or outer boundaries of a DOM element.  Use the <code>snap</code>, <code>snapMode</code> (inner, outer, both), and <code>snapTolerance</code> (distance in pixels the draggable must be from the element when snapping is invoked) options. </p>
<p>Or snap the draggable to a grid.  Set the dimensions of grid cells (height and width in pixels) with the <code>grid</code> option.</p>
</div>
</body>
</html>

Click to view the demo

The code above generates the following result.

Build jQuery UI Draggable - Snap to element or grid 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