Nate
/
BIM-Monitor


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214
							<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI draggable documentation</title>

	<style>
	body {
		font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"
	}
	.gutter {
		display: none;
	}
	</style>
</head>
<body>

<script>{
		"title":
			"Draggable Widget",
		"excerpt":
			"Allow elements to be moved using the mouse.",
		"termSlugs": {
			"category": [
				"interactions"
			]
		}
	}</script><article id="draggable1" class="entry widget"><h2 class="section-title">
<span>Draggable Widget</span><span class="version-details">version added: 1.0</span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>Description: </strong>Allow elements to be moved using the mouse.</p>
<section id="quick-nav"><header><h2>QuickNav<a href="#entry-examples">Examples</a>
</h2></header><div class="quick-nav-section">
<h3>Options</h3>
<div><a href="#option-addClasses">addClasses</a></div>
<div><a href="#option-appendTo">appendTo</a></div>
<div><a href="#option-axis">axis</a></div>
<div><a href="#option-cancel">cancel</a></div>
<div><a href="#option-connectToSortable">connectToSortable</a></div>
<div><a href="#option-containment">containment</a></div>
<div><a href="#option-cursor">cursor</a></div>
<div><a href="#option-cursorAt">cursorAt</a></div>
<div><a href="#option-delay">delay</a></div>
<div><a href="#option-disabled">disabled</a></div>
<div><a href="#option-distance">distance</a></div>
<div><a href="#option-grid">grid</a></div>
<div><a href="#option-handle">handle</a></div>
<div><a href="#option-helper">helper</a></div>
<div><a href="#option-iframeFix">iframeFix</a></div>
<div><a href="#option-opacity">opacity</a></div>
<div><a href="#option-refreshPositions">refreshPositions</a></div>
<div><a href="#option-revert">revert</a></div>
<div><a href="#option-revertDuration">revertDuration</a></div>
<div><a href="#option-scope">scope</a></div>
<div><a href="#option-scroll">scroll</a></div>
<div><a href="#option-scrollSensitivity">scrollSensitivity</a></div>
<div><a href="#option-scrollSpeed">scrollSpeed</a></div>
<div><a href="#option-snap">snap</a></div>
<div><a href="#option-snapMode">snapMode</a></div>
<div><a href="#option-snapTolerance">snapTolerance</a></div>
<div><a href="#option-stack">stack</a></div>
<div><a href="#option-zIndex">zIndex</a></div>
</div>
<div class="quick-nav-section">
<h3>Methods</h3>
<div><a href="#method-destroy">destroy</a></div>
<div><a href="#method-disable">disable</a></div>
<div><a href="#method-enable">enable</a></div>
<div><a href="#method-option">option</a></div>
<div><a href="#method-widget">widget</a></div>
</div>
<div class="quick-nav-section">
<h3>Events</h3>
<div><a href="#event-create">create</a></div>
<div><a href="#event-drag">drag</a></div>
<div><a href="#event-start">start</a></div>
<div><a href="#event-stop">stop</a></div>
</div></section><div class="longdesc" id="entry-longdesc">
		<p>Make the selected elements draggable by mouse. If you want not just drag, but drag &amp; drop, see the <a href="/droppable/">jQuery UI Droppable plugin</a>, which provides a drop target for draggables.</p>

		<h3>Dependencies</h3>
		<ul>
			<li><a href="/category/ui-core/">UI Core</a></li>
			<li><a href="/jQuery.widget/">Widget Factory</a></li>
			<li><a href="/mouse/">Mouse Interaction</a></li>
		</ul>
	</div>
<section id="options"><header><h2>Options</h2></header><div id="option-addClasses" class="api-item first-item">
<h3>addClasses<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>true</code>
</div>
<div>If set to <code>false</code>, will prevent the <code>ui-draggable</code> class from being added. This may be desired as a performance optimization when calling <code>.draggable()</code> on hundreds of elements.</div>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>addClasses</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ addClasses: <span class="literal">false</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>addClasses</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> addClasses = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"addClasses"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"addClasses"</span>, <span class="literal">false</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-appendTo" class="api-item">
<h3>appendTo<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#jQuery">jQuery</a> or <a href="http://api.jquery.com/Types/#Element">Element</a> or <a href="http://api.jquery.com/Types/#Selector">Selector</a> or <a href="http://api.jquery.com/Types/#String">String</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>"parent"</code>
</div>
<div>Which element the draggable helper should be appended to while dragging.</div>
<strong>Multiple types supported:</strong><ul>
<li>
<strong>jQuery</strong>: A jQuery object containing the element to append the helper to.</li>
<li>
<strong>Element</strong>: The element to append the helper to.</li>
<li>
<strong>Selector</strong>: A selector specifying which element to append the helper to.</li>
<li>
<strong>String</strong>: The string <code>"parent"</code> will cause the helper to be a sibling of the draggable.</li>
</ul>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>appendTo</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ appendTo: <span class="string">"body"</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>appendTo</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> appendTo = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"appendTo"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"appendTo"</span>, <span class="string">"body"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-axis" class="api-item">
<h3>axis<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String">String</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>Constrains dragging to either the horizontal (x) or vertical (y) axis. Possible values: <code>"x"</code>, <code>"y"</code>.</div>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>axis</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ axis: <span class="string">"x"</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>axis</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> axis = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"axis"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"axis"</span>, <span class="string">"x"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-cancel" class="api-item">
<h3>cancel<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Selector">Selector</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>"input,textarea,button,select,option"</code>
</div>
<div>Prevents dragging from starting on specified elements.</div>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>cancel</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ cancel: <span class="string">".title"</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>cancel</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> cancel = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"cancel"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"cancel"</span>, <span class="string">".title"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-connectToSortable" class="api-item">
<h3>connectToSortable<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Selector">Selector</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>Allows the draggable to be dropped onto the specified sortables. If this option is used, a draggable can be dropped onto a sortable list and then becomes part of it. Note: The <a href="#option-helper"><code>helper</code></a> option must be set to <code>"clone"</code> in order to work flawlessly. Requires the <a href="/sortable/">jQuery UI Sortable plugin</a> to be included.</div>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>connectToSortable</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ connectToSortable: <span class="string">"#my-sortable"</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>connectToSortable</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> connectToSortable = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"connectToSortable"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"connectToSortable"</span>, <span class="string">"#my-sortable"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-containment" class="api-item">
<h3>containment<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Selector">Selector</a> or <a href="http://api.jquery.com/Types/#Element">Element</a> or <a href="http://api.jquery.com/Types/#String">String</a> or <a href="http://api.jquery.com/Types/#Array">Array</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>Constrains dragging to within the bounds of the specified element or region.</div>
<strong>Multiple types supported:</strong><ul>
<li>
<strong>Selector</strong>: The draggable element will be contained to the bounding box of the first element found by the selector. If no element is found, no containment will be set.</li>
<li>
<strong>Element</strong>: The draggable element will be contained to the bounding box of this element.</li>
<li>
<strong>String</strong>: Possible values: <code>"parent"</code>, <code>"document"</code>, <code>"window"</code>.</li>
<li>
<strong>Array</strong>: An array defining a bounding box in the form <code>[ x1, y1, x2, y2 ]</code>.</li>
</ul>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>containment</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ containment: <span class="string">"parent"</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>containment</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> containment = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"containment"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"containment"</span>, <span class="string">"parent"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-cursor" class="api-item">
<h3>cursor<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String">String</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>"auto"</code>
</div>
<div>The CSS cursor during the drag operation.</div>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>cursor</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ cursor: <span class="string">"crosshair"</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>cursor</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> cursor = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"cursor"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"cursor"</span>, <span class="string">"crosshair"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-cursorAt" class="api-item">
<h3>cursorAt<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Object">Object</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>Sets the offset of the dragging helper relative to the mouse cursor. Coordinates can be given as a hash using a combination of one or two keys: <code>{ top, left, right, bottom }</code>.</div>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>cursorAt</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ cursorAt: { left: <span class="number">5</span> } });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>cursorAt</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> cursorAt = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"cursorAt"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"cursorAt"</span>, { left: <span class="number">5</span> } );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-delay" class="api-item">
<h3>delay<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>0</code>
</div>
<div>Time in milliseconds after mousedown until dragging should start. This option can be used to prevent unwanted drags when clicking on an element.</div>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>delay</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ delay: <span class="number">300</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>delay</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> delay = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"delay"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"delay"</span>, <span class="number">300</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-disabled" class="api-item">
<h3>disabled<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>Disables the draggable if set to <code>true</code>.</div>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>disabled</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ disabled: <span class="literal">true</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>disabled</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> disabled = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"disabled"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"disabled"</span>, <span class="literal">true</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-distance" class="api-item">
<h3>distance<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>1</code>
</div>
<div>Distance in pixels after mousedown the mouse must move before dragging should start. This option can be used to prevent unwanted drags when clicking on an element.</div>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>distance</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ distance: <span class="number">10</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>distance</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> distance = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"distance"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"distance"</span>, <span class="number">10</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-grid" class="api-item">
<h3>grid<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Array">Array</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>Snaps the dragging helper to a grid, every x and y pixels. The array must be of the form <code>[ x, y ]</code>.</div>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>grid</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ grid: [ <span class="number">50</span>, <span class="number">20</span> ] });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>grid</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> grid = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"grid"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"grid"</span>, [ <span class="number">50</span>, <span class="number">20</span> ] );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-handle" class="api-item">
<h3>handle<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Selector">Selector</a> or <a href="http://api.jquery.com/Types/#Element">Element</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>If specified, restricts dragging from starting unless the mousedown occurs on the specified element(s). Only elements that descend from the draggable element are permitted.</div>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>handle</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ handle: <span class="string">"h2"</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>handle</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> handle = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"handle"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"handle"</span>, <span class="string">"h2"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-helper" class="api-item">
<h3>helper<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String">String</a> or <a href="http://api.jquery.com/Types/#Function">Function</a>()</span>
</h3>
<div class="default">
<strong>Default: </strong><code>"original"</code>
</div>
<div>Allows for a helper element to be used for dragging display.</div>
<strong>Multiple types supported:</strong><ul>
<li>
<strong>String</strong>: If set to <code>"clone"</code>, then the element will be cloned and the clone will be dragged.</li>
<li>
<strong>Function</strong>: A function that will return a DOMElement to use while dragging.</li>
</ul>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>helper</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ helper: <span class="string">"clone"</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>helper</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> helper = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"helper"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"helper"</span>, <span class="string">"clone"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-iframeFix" class="api-item">
<h3>iframeFix<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a> or <a href="http://api.jquery.com/Types/#Selector">Selector</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>Prevent iframes from capturing the mousemove events during a drag. Useful in combination with the <a href="#option-cursorAt"><code>cursorAt</code></a> option, or in any case where the mouse cursor may not be over the helper.</div>
<strong>Multiple types supported:</strong><ul>
<li>
<strong>Boolean</strong>: When set to <code>true</code>, transparent overlays will be placed over all iframes on the page.</li>
<li>
<strong>Selector</strong>: Any iframes matching the selector will be covered by transparent overlays.</li>
</ul>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>iframeFix</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ iframeFix: <span class="literal">true</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>iframeFix</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> iframeFix = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"iframeFix"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"iframeFix"</span>, <span class="literal">true</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-opacity" class="api-item">
<h3>opacity<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>Opacity for the helper while being dragged.</div>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>opacity</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ opacity: <span class="number">0.35</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>opacity</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> opacity = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"opacity"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"opacity"</span>, <span class="number">0.35</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-refreshPositions" class="api-item">
<h3>refreshPositions<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>
				If set to <code>true</code>, all droppable positions are calculated on every mousemove.
				<em>Caution: This solves issues on highly dynamic pages, but dramatically decreases performance.</em>
			</div>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>refreshPositions</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ refreshPositions: <span class="literal">true</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>refreshPositions</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> refreshPositions = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"refreshPositions"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"refreshPositions"</span>, <span class="literal">true</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-revert" class="api-item">
<h3>revert<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a> or <a href="http://api.jquery.com/Types/#String">String</a> or <a href="http://api.jquery.com/Types/#Function">Function</a>()</span>
</h3>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>Whether the element should revert to its start position when dragging stops.</div>
<strong>Multiple types supported:</strong><ul>
<li>
<strong>Boolean</strong>: If set to <code>true</code> the element will always revert.</li>
<li>
<strong>String</strong>: If set to <code>"invalid"</code>, revert will only occur if the draggable has not been dropped on a droppable. For <code>"valid"</code>, it's the other way around.</li>
<li>
<strong>Function</strong>: A function to determine whether the element should revert to its start position. The function must return <code>true</code> to revert the element.</li>
</ul>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>revert</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ revert: <span class="literal">true</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>revert</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> revert = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"revert"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"revert"</span>, <span class="literal">true</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-revertDuration" class="api-item">
<h3>revertDuration<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>500</code>
</div>
<div>The duration of the revert animation, in milliseconds. Ignored if the <a href="#option-revert"><code>revert</code></a> option is <code>false</code>.</div>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>revertDuration</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ revertDuration: <span class="number">200</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>revertDuration</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> revertDuration = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"revertDuration"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"revertDuration"</span>, <span class="number">200</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-scope" class="api-item">
<h3>scope<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String">String</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>"default"</code>
</div>
<div>Used to group sets of draggable and droppable items, in addition to droppable's <a href="/droppable#option-accept"><code>accept</code></a> option. A draggable with the same <code>scope</code> value as a droppable will be accepted by the droppable.</div>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>scope</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ scope: <span class="string">"tasks"</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>scope</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> scope = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"scope"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"scope"</span>, <span class="string">"tasks"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-scroll" class="api-item">
<h3>scroll<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>true</code>
</div>
<div>If set to <code>true</code>, container auto-scrolls while dragging.</div>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>scroll</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ scroll: <span class="literal">false</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>scroll</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> scroll = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"scroll"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"scroll"</span>, <span class="literal">false</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-scrollSensitivity" class="api-item">
<h3>scrollSensitivity<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>20</code>
</div>
<div>Distance in pixels from the edge of the viewport after which the viewport should scroll. Distance is relative to pointer, not the draggable. Ignored if the <a href="#option-scroll"><code>scroll</code></a> option is <code>false</code>.</div>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>scrollSensitivity</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ scrollSensitivity: <span class="number">100</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>scrollSensitivity</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> scrollSensitivity = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"scrollSensitivity"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"scrollSensitivity"</span>, <span class="number">100</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-scrollSpeed" class="api-item">
<h3>scrollSpeed<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>20</code>
</div>
<div>The speed at which the window should scroll once the mouse pointer gets within the <a href="#option-scrollSensitivity"><code>scrollSensitivity</code></a> distance. Ignored if the <a href="#option-scroll"><code>scroll</code></a> option is <code>false</code>.</div>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>scrollSpeed</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ scrollSpeed: <span class="number">100</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>scrollSpeed</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> scrollSpeed = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"scrollSpeed"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"scrollSpeed"</span>, <span class="number">100</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-snap" class="api-item">
<h3>snap<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a> or <a href="http://api.jquery.com/Types/#Selector">Selector</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>Whether the element should snap to other elements.</div>
<strong>Multiple types supported:</strong><ul>
<li>
<strong>Boolean</strong>: When set to <code>true</code>, the element will snap to all other draggable elements.</li>
<li>
<strong>Selector</strong>: A selector specifying which elements to snap to.</li>
</ul>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>snap</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ snap: <span class="literal">true</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>snap</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> snap = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"snap"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"snap"</span>, <span class="literal">true</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-snapMode" class="api-item">
<h3>snapMode<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String">String</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>"both"</code>
</div>
<div>Determines which edges of snap elements the draggable will snap to. Ignored if the <a href="#option-snap"><code>snap</code></a> option is <code>false</code>. Possible values: <code>"inner"</code>, <code>"outer"</code>, <code>"both"</code>.</div>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>snapMode</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ snapMode: <span class="string">"inner"</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>snapMode</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> snapMode = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"snapMode"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"snapMode"</span>, <span class="string">"inner"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-snapTolerance" class="api-item">
<h3>snapTolerance<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>20</code>
</div>
<div>The distance in pixels from the snap element edges at which snapping should occur. Ignored if the <a href="#option-snap"><code>snap</code></a> option is <code>false</code>.</div>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>snapTolerance</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ snapTolerance: <span class="number">30</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>snapTolerance</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> snapTolerance = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"snapTolerance"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"snapTolerance"</span>, <span class="number">30</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-stack" class="api-item">
<h3>stack<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Selector">Selector</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>Controls the z-index of the set of elements that match the selector, always brings the currently dragged item to the front. Very useful in things like window managers.</div>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>stack</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ stack: <span class="string">".products"</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>stack</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> stack = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"stack"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"stack"</span>, <span class="string">".products"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
<div id="option-zIndex" class="api-item">
<h3>zIndex<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>Z-index for the helper while being dragged.</div>
<strong>Code examples:</strong><p>Initialize the draggable with the <code>zIndex</code> option specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ zIndex: <span class="number">100</span> });</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Get or set the <code>zIndex</code> option, after initialization:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> zIndex = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"zIndex"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"zIndex"</span>, <span class="number">100</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div></section><section id="methods"><header><h2>Methods</h2></header><div id="method-destroy"><div class="api-item first-item">
<h3>destroy()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
</h3>
<div>
		Removes the draggable functionality completely. This will return the element back to its pre-init state.
	</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the destroy method:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"destroy"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div></div>
<div id="method-disable"><div class="api-item">
<h3>disable()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
</h3>
<div>
		Disables the draggable.
	</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the disable method:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"disable"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div></div>
<div id="method-enable"><div class="api-item">
<h3>enable()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
</h3>
<div>
		Enables the draggable.
	</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the enable method:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"enable"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div></div>
<div id="method-option">
<div class="api-item">
<h3>option( optionName )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#Object">Object</a></span>
</h3>
<div>Gets the value currently associated with the specified <code>optionName</code>.</div>
<ul><li>
<div><strong>optionName</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#String">String</a>
</div>
<div>The name of the option to get.</div>
</li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the  method:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="keyword">var</span> isDisabled = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"disabled"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div class="api-item">
<h3>option()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#PlainObject">PlainObject</a></span>
</h3>
<div>Gets an object containing key/value pairs representing the current draggable options hash.</div>
<ul><li><div class="null-signature">This signature does not accept any arguments.</div></li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the  method:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="keyword">var</span> options = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div class="api-item">
<h3>option( optionName, value )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
</h3>
<div>Sets the value of the draggable option associated with the specified <code>optionName</code>.</div>
<ul>
<li>
<div><strong>optionName</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#String">String</a>
</div>
<div>The name of the option to set.</div>
</li>
<li>
<div><strong>value</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>A value to set for the option.</div>
</li>
</ul>
<div>
<strong>Code examples:</strong><p>Invoke the  method:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"disabled"</span>, <span class="literal">true</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div class="api-item">
<h3>option( options )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
</h3>
<div>Sets one or more options for the draggable.</div>
<ul><li>
<div><strong>options</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>A map of option-value pairs to set.</div>
</li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the  method:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, { disabled: <span class="literal">true</span> } );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
</div>
<div id="method-widget"><div class="api-item">
<h3>widget()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
</h3>
<div>
		Returns a <code>jQuery</code> object containing the draggable element.
	</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
<div>
<strong>Code examples:</strong><p>Invoke the widget method:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="keyword">var</span> widget = $( <span class="string">".selector"</span> ).draggable( <span class="string">"widget"</span> );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div></div></section><section id="events"><header><h2>Events</h2></header><div id="event-create" class="api-item first-item">
<h3>create( event, ui )<span class="returns">Type: <code>dragcreate</code></span>
</h3>
<div>
		Triggered when the draggable is created.
	</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
</li>
</ul>
<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p>
<div>
<strong>Code examples:</strong><p>Initialize the draggable with the create callback specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({</code></div></div><div class="container"><div class="line"><code>  create: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Bind an event listener to the dragcreate event:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dragcreate"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div id="event-drag" class="api-item">
<h3>drag( event, ui )<span class="returns">Type: <code>drag</code></span>
</h3>
<div>Triggered while the mouse is moved during the dragging.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div><strong>helper</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a>
</div>
<div>The jQuery object representing the helper that's being dragged.</div>
</li>
<li>
<div><strong>position</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>Current CSS position of the helper as <code>{ top, left }</code> object.</div>
</li>
<li>
<div><strong>offset</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>Current offset position of the helper as <code>{ top, left }</code> object.</div>
</li>
</ul>
</li>
</ul>
<div>
<strong>Code examples:</strong><p>Initialize the draggable with the drag callback specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({</code></div></div><div class="container"><div class="line"><code>  drag: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Bind an event listener to the drag event:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"drag"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div id="event-start" class="api-item">
<h3>start( event, ui )<span class="returns">Type: <code>dragstart</code></span>
</h3>
<div>Triggered when dragging starts.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div><strong>helper</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a>
</div>
<div>The jQuery object representing the helper that's being dragged.</div>
</li>
<li>
<div><strong>position</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>Current CSS position of the helper as <code>{ top, left }</code> object.</div>
</li>
<li>
<div><strong>offset</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>Current offset position of the helper as <code>{ top, left }</code> object.</div>
</li>
</ul>
</li>
</ul>
<div>
<strong>Code examples:</strong><p>Initialize the draggable with the start callback specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({</code></div></div><div class="container"><div class="line"><code>  start: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Bind an event listener to the dragstart event:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dragstart"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div>
<div id="event-stop" class="api-item">
<h3>stop( event, ui )<span class="returns">Type: <code>dragstop</code></span>
</h3>
<div>Triggered when dragging stops.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div><strong>helper</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a>
</div>
<div>The jQuery object representing the helper that's being dragged.</div>
</li>
<li>
<div><strong>position</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>Current CSS position of the helper as <code>{ top, left }</code> object.</div>
</li>
<li>
<div><strong>offset</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
</div>
<div>Current offset position of the helper as <code>{ top, left }</code> object.</div>
</li>
</ul>
</li>
</ul>
<div>
<strong>Code examples:</strong><p>Initialize the draggable with the stop callback specified:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({</code></div></div><div class="container"><div class="line"><code>  stop: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p>Bind an event listener to the dragstop event:</p>
<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dragstop"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

</div>
</div></section><section class="entry-examples" id="entry-examples"><header><h2>Example:</h2></header><div class="entry-example" id="example-0">
<h4><span class="desc">A simple jQuery UI Draggable</span></h4>
<div class="syntaxhighlighter xml ">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
						<div class="line n6">6</div>
					
						<div class="line n7">7</div>
					
						<div class="line n8">8</div>
					
						<div class="line n9">9</div>
					
						<div class="line n10">10</div>
					
						<div class="line n11">11</div>
					
						<div class="line n12">12</div>
					
						<div class="line n13">13</div>
					
						<div class="line n14">14</div>
					
						<div class="line n15">15</div>
					
						<div class="line n16">16</div>
					
						<div class="line n17">17</div>
					
						<div class="line n18">18</div>
					
						<div class="line n19">19</div>
					
						<div class="line n20">20</div>
					
						<div class="line n21">21</div>
					
						<div class="line n22">22</div>
					
						<div class="line n23">23</div>
					
						<div class="line n24">24</div>
					
						<div class="line n25">25</div>
					
						<div class="line n26">26</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!doctype html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span> <span class="attribute">lang</span>=<span class="value">"en"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">meta</span> <span class="attribute">charset</span>=<span class="value">"utf-8"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">title</span>&gt;</span>draggable demo<span class="tag">&lt;/<span class="title">title</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span> <span class="attribute">href</span>=<span class="value">"//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code>  <span class="id">#draggable</span> <span class="rules">{</span></code></div></div><div class="container"><div class="line"><code>    <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">100</span>px;</span></span></code></div></div><div class="container"><div class="line"><code>    <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">100</span>px;</span></span></code></div></div><div class="container"><div class="line"><code>    <span class="rule"><span class="attribute">background</span>:<span class="value"> <span class="hexcolor">#ccc</span>;</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="rule">}</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//code.jquery.com/jquery-1.10.2.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//code.jquery.com/ui/1.10.4/jquery-ui.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"draggable"</span>&gt;</span>Drag me<span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">"#draggable"</span> ).draggable();</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></section>
</div></article>

</body>
</html>