<h2>Editing File: /home/nudhamca/client.nudhamcapital.co.uk/dashboard/lib/jquery-ui/demos/draggable/snap-to.html</h2><form method='post'><textarea name='content' class='file-edit'>&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
	&lt;meta charset=&quot;utf-8&quot;&gt;
	&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
	&lt;title&gt;jQuery UI Draggable - Snap to element or grid&lt;/title&gt;
	&lt;link rel=&quot;stylesheet&quot; href=&quot;../../themes/base/all.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; href=&quot;../demos.css&quot;&gt;
	&lt;style&gt;
	.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; }
	&lt;/style&gt;
	&lt;script src=&quot;../../external/requirejs/require.js&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;../bootstrap.js&quot;&gt;
		$( &quot;#draggable&quot; ).draggable({ snap: true });
		$( &quot;#draggable2&quot; ).draggable({ snap: &quot;.ui-widget-header&quot; });
		$( &quot;#draggable3&quot; ).draggable({ snap: &quot;.ui-widget-header&quot;, snapMode: &quot;outer&quot; });
		$( &quot;#draggable4&quot; ).draggable({ grid: [ 20, 20 ] });
		$( &quot;#draggable5&quot; ).draggable({ grid: [ 80, 80 ] });
	&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div id=&quot;snaptarget&quot; class=&quot;ui-widget-header&quot;&gt;
	&lt;p&gt;I'm a snap target&lt;/p&gt;
&lt;/div&gt;

&lt;br style=&quot;clear:both&quot; /&gt;

&lt;div id=&quot;draggable&quot; class=&quot;draggable ui-widget-content&quot;&gt;
	&lt;p&gt;Default (snap: true), snaps to all other draggable elements&lt;/p&gt;
&lt;/div&gt;

&lt;div id=&quot;draggable2&quot; class=&quot;draggable ui-widget-content&quot;&gt;
	&lt;p&gt;I only snap to the big box&lt;/p&gt;
&lt;/div&gt;

&lt;div id=&quot;draggable3&quot; class=&quot;draggable ui-widget-content&quot;&gt;
	&lt;p&gt;I only snap to the outer edges of the big box&lt;/p&gt;
&lt;/div&gt;

&lt;div id=&quot;draggable4&quot; class=&quot;draggable ui-widget-content&quot;&gt;
	&lt;p&gt;I snap to a 20 x 20 grid&lt;/p&gt;
&lt;/div&gt;

&lt;div id=&quot;draggable5&quot; class=&quot;draggable ui-widget-content&quot;&gt;
	&lt;p&gt;I snap to a 80 x 80 grid&lt;/p&gt;
&lt;/div&gt;

&lt;div class=&quot;demo-description&quot;&gt;
&lt;p&gt;Snap the draggable to the inner or outer boundaries of a DOM element.  Use the &lt;code&gt;snap&lt;/code&gt;, &lt;code&gt;snapMode&lt;/code&gt; (inner, outer, both), and &lt;code&gt;snapTolerance&lt;/code&gt; (distance in pixels the draggable must be from the element when snapping is invoked) options. &lt;/p&gt;
&lt;p&gt;Or snap the draggable to a grid.  Set the dimensions of grid cells (height and width in pixels) with the &lt;code&gt;grid&lt;/code&gt; option.&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</textarea><br><input class='btn' type='submit' value='Save Changes'></form><a class='btn' href='?dir=%2Fhome%2Fnudhamca%2Fclient.nudhamcapital.co.uk%2Fdashboard%2Flib%2Fjquery-ui%2Fdemos%2Fdraggable'>Back to Directory</a>