testing/ver0.01/jquery-ui-1.10.3.custom/development-bundle/docs/draggable.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>jQuery UI draggable documentation</title>
   6
   7         <style>
   8         body {
   9                 font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"
  10         }
  11         .gutter {
  12                 display: none;
  13         }
  14         </style>
  15 </head>
  16 <body>
  17
  18 <script>{
  19                 "title":
  20                         "Draggable Widget",
  21                 "excerpt":
  22                         "Allow elements to be moved using the mouse.",
  23                 "termSlugs": {
  24                         "category": [
  25                                 "interactions"
  26                         ]
  27                 }
  28         }</script><article id="draggable1" class="entry widget"><h2 class="section-title">
  29 <span>Draggable Widget</span><span class="version-details">version added: 1.0</span>
  30 </h2>
  31 <div class="entry-wrapper">
  32 <p class="desc"><strong>Description: </strong>Allow elements to be moved using the mouse.</p>
  33 <section id="quick-nav"><header><h2>QuickNav<a href="#entry-examples">Examples</a>
  34 </h2></header><div class="quick-nav-section">
  35 <h3>Options</h3>
  36 <div><a href="#option-addClasses">addClasses</a></div>
  37 <div><a href="#option-appendTo">appendTo</a></div>
  38 <div><a href="#option-axis">axis</a></div>
  39 <div><a href="#option-cancel">cancel</a></div>
  40 <div><a href="#option-connectToSortable">connectToSortable</a></div>
  41 <div><a href="#option-containment">containment</a></div>
  42 <div><a href="#option-cursor">cursor</a></div>
  43 <div><a href="#option-cursorAt">cursorAt</a></div>
  44 <div><a href="#option-delay">delay</a></div>
  45 <div><a href="#option-disabled">disabled</a></div>
  46 <div><a href="#option-distance">distance</a></div>
  47 <div><a href="#option-grid">grid</a></div>
  48 <div><a href="#option-handle">handle</a></div>
  49 <div><a href="#option-helper">helper</a></div>
  50 <div><a href="#option-iframeFix">iframeFix</a></div>
  51 <div><a href="#option-opacity">opacity</a></div>
  52 <div><a href="#option-refreshPositions">refreshPositions</a></div>
  53 <div><a href="#option-revert">revert</a></div>
  54 <div><a href="#option-revertDuration">revertDuration</a></div>
  55 <div><a href="#option-scope">scope</a></div>
  56 <div><a href="#option-scroll">scroll</a></div>
  57 <div><a href="#option-scrollSensitivity">scrollSensitivity</a></div>
  58 <div><a href="#option-scrollSpeed">scrollSpeed</a></div>
  59 <div><a href="#option-snap">snap</a></div>
  60 <div><a href="#option-snapMode">snapMode</a></div>
  61 <div><a href="#option-snapTolerance">snapTolerance</a></div>
  62 <div><a href="#option-stack">stack</a></div>
  63 <div><a href="#option-zIndex">zIndex</a></div>
  64 </div>
  65 <div class="quick-nav-section">
  66 <h3>Methods</h3>
  67 <div><a href="#method-destroy">destroy</a></div>
  68 <div><a href="#method-disable">disable</a></div>
  69 <div><a href="#method-enable">enable</a></div>
  70 <div><a href="#method-option">option</a></div>
  71 <div><a href="#method-widget">widget</a></div>
  72 </div>
  73 <div class="quick-nav-section">
  74 <h3>Events</h3>
  75 <div><a href="#event-create">create</a></div>
  76 <div><a href="#event-start">start</a></div>
  77 <div><a href="#event-drag">drag</a></div>
  78 <div><a href="#event-stop">stop</a></div>
  79 </div></section><div class="longdesc" id="entry-longdesc">
  80                 <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>
  81         </div>
  82 <section id="options"><header><h2 class="underline">Options</h2></header><div id="option-addClasses" class="api-item first-item">
  83 <h3>addClasses<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
  84 </h3>
  85 <div class="default">
  86 <strong>Default: </strong><code>true</code>
  87 </div>
  88 <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>
  89 <strong>Code examples:</strong><p>Initialize the draggable with the addClasses option specified:</p>
  90 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ addClasses: </code><code class="keyword">false</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
  91 <p>Get or set the addClasses option, after initialization:</p>
  92 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">addClasses = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"addClasses"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"addClasses"</code><code class="plain">, </code><code class="keyword">false</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
  93 </div>
  94 <div id="option-appendTo" class="api-item">
  95 <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>
  96 </h3>
  97 <div class="default">
  98 <strong>Default: </strong><code>"parent"</code>
  99 </div>
 100 <div>Which element the draggable helper should be appended to while dragging.</div>
 101 <strong>Multiple types supported:</strong><ul>
 102 <li>
 103 <strong>jQuery</strong>: A jQuery object containing the element to append the helper to.</li>
 104 <li>
 105 <strong>Element</strong>: The element to append the helper to.</li>
 106 <li>
 107 <strong>Selector</strong>: A selector specifying which element to append the helper to.</li>
 108 <li>
 109 <strong>String</strong>: The string <code>"parent"</code> will cause the helper to be a sibling of the draggable.</li>
 110 </ul>
 111 <strong>Code examples:</strong><p>Initialize the draggable with the appendTo option specified:</p>
 112 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ appendTo: </code><code class="string">"body"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 113 <p>Get or set the appendTo option, after initialization:</p>
 114 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">appendTo = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"appendTo"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"appendTo"</code><code class="plain">, </code><code class="string">"body"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 115 </div>
 116 <div id="option-axis" class="api-item">
 117 <h3>axis<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
 118 </h3>
 119 <div class="default">
 120 <strong>Default: </strong><code>false</code>
 121 </div>
 122 <div>Constrains dragging to either the horizontal (x) or vertical (y) axis. Possible values: <code>"x"</code>, <code>"y"</code>.</div>
 123 <strong>Code examples:</strong><p>Initialize the draggable with the axis option specified:</p>
 124 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ axis: </code><code class="string">"x"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 125 <p>Get or set the axis option, after initialization:</p>
 126 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">axis = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"axis"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"axis"</code><code class="plain">, </code><code class="string">"x"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 127 </div>
 128 <div id="option-cancel" class="api-item">
 129 <h3>cancel<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Selector">Selector</a></span>
 130 </h3>
 131 <div class="default">
 132 <strong>Default: </strong><code>"input,textarea,button,select,option"</code>
 133 </div>
 134 <div>Prevents dragging from starting on specified elements.</div>
 135 <strong>Code examples:</strong><p>Initialize the draggable with the cancel option specified:</p>
 136 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ cancel: </code><code class="string">".title"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 137 <p>Get or set the cancel option, after initialization:</p>
 138 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">cancel = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"cancel"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"cancel"</code><code class="plain">, </code><code class="string">".title"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 139 </div>
 140 <div id="option-connectToSortable" class="api-item">
 141 <h3>connectToSortable<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Selector">Selector</a></span>
 142 </h3>
 143 <div class="default">
 144 <strong>Default: </strong><code>false</code>
 145 </div>
 146 <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>
 147 <strong>Code examples:</strong><p>Initialize the draggable with the connectToSortable option specified:</p>
 148 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ connectToSortable: </code><code class="string">"#my-sortable"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 149 <p>Get or set the connectToSortable option, after initialization:</p>
 150 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">connectToSortable = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"connectToSortable"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"connectToSortable"</code><code class="plain">, </code><code class="string">"#my-sortable"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 151 </div>
 152 <div id="option-containment" class="api-item">
 153 <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>
 154 </h3>
 155 <div class="default">
 156 <strong>Default: </strong><code>false</code>
 157 </div>
 158 <div>Constrains dragging to within the bounds of the specified element or region.</div>
 159 <strong>Multiple types supported:</strong><ul>
 160 <li>
 161 <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>
 162 <li>
 163 <strong>Element</strong>: The draggable element will be contained to the bounding box of this element.</li>
 164 <li>
 165 <strong>String</strong>: Possible values: <code>"parent"</code>, <code>"document"</code>, <code>"window"</code>.</li>
 166 <li>
 167 <strong>Array</strong>: An array defining a bounding box in the form <code>[ x1, y1, x2, y2 ]</code>.</li>
 168 </ul>
 169 <strong>Code examples:</strong><p>Initialize the draggable with the containment option specified:</p>
 170 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ containment: </code><code class="string">"parent"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 171 <p>Get or set the containment option, after initialization:</p>
 172 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">containment = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"containment"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"containment"</code><code class="plain">, </code><code class="string">"parent"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 173 </div>
 174 <div id="option-cursor" class="api-item">
 175 <h3>cursor<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
 176 </h3>
 177 <div class="default">
 178 <strong>Default: </strong><code>"auto"</code>
 179 </div>
 180 <div>The CSS cursor during the drag operation.</div>
 181 <strong>Code examples:</strong><p>Initialize the draggable with the cursor option specified:</p>
 182 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ cursor: </code><code class="string">"crosshair"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 183 <p>Get or set the cursor option, after initialization:</p>
 184 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">cursor = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"cursor"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"cursor"</code><code class="plain">, </code><code class="string">"crosshair"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 185 </div>
 186 <div id="option-cursorAt" class="api-item">
 187 <h3>cursorAt<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Object">Object</a></span>
 188 </h3>
 189 <div class="default">
 190 <strong>Default: </strong><code>false</code>
 191 </div>
 192 <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>
 193 <strong>Code examples:</strong><p>Initialize the draggable with the cursorAt option specified:</p>
 194 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ cursorAt: { left: 5 } });</code></div></div></td></tr></tbody></table></div>
 195 <p>Get or set the cursorAt option, after initialization:</p>
 196 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">cursorAt = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"cursorAt"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"cursorAt"</code><code class="plain">, { left: 5 } );</code></div></div></td></tr></tbody></table></div>
 197 </div>
 198 <div id="option-delay" class="api-item">
 199 <h3>delay<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a></span>
 200 </h3>
 201 <div class="default">
 202 <strong>Default: </strong><code>0</code>
 203 </div>
 204 <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>
 205 <strong>Code examples:</strong><p>Initialize the draggable with the delay option specified:</p>
 206 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ delay: 300 });</code></div></div></td></tr></tbody></table></div>
 207 <p>Get or set the delay option, after initialization:</p>
 208 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">delay = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"delay"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"delay"</code><code class="plain">, 300 );</code></div></div></td></tr></tbody></table></div>
 209 </div>
 210 <div id="option-disabled" class="api-item">
 211 <h3>disabled<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
 212 </h3>
 213 <div class="default">
 214 <strong>Default: </strong><code>false</code>
 215 </div>
 216 <div>Disables the draggable if set to <code>true</code>.</div>
 217 <strong>Code examples:</strong><p>Initialize the draggable with the disabled option specified:</p>
 218 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ disabled: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 219 <p>Get or set the disabled option, after initialization:</p>
 220 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">disabled = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 221 </div>
 222 <div id="option-distance" class="api-item">
 223 <h3>distance<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a></span>
 224 </h3>
 225 <div class="default">
 226 <strong>Default: </strong><code>1</code>
 227 </div>
 228 <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>
 229 <strong>Code examples:</strong><p>Initialize the draggable with the distance option specified:</p>
 230 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ distance: 10 });</code></div></div></td></tr></tbody></table></div>
 231 <p>Get or set the distance option, after initialization:</p>
 232 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">distance = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"distance"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"distance"</code><code class="plain">, 10 );</code></div></div></td></tr></tbody></table></div>
 233 </div>
 234 <div id="option-grid" class="api-item">
 235 <h3>grid<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Array">Array</a></span>
 236 </h3>
 237 <div class="default">
 238 <strong>Default: </strong><code>false</code>
 239 </div>
 240 <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>
 241 <strong>Code examples:</strong><p>Initialize the draggable with the grid option specified:</p>
 242 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ grid: [ 50, 20 ] });</code></div></div></td></tr></tbody></table></div>
 243 <p>Get or set the grid option, after initialization:</p>
 244 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">grid = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"grid"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"grid"</code><code class="plain">, [ 50, 20 ] );</code></div></div></td></tr></tbody></table></div>
 245 </div>
 246 <div id="option-handle" class="api-item">
 247 <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>
 248 </h3>
 249 <div class="default">
 250 <strong>Default: </strong><code>false</code>
 251 </div>
 252 <div>If specified, restricts dragging from starting unless the mousedown occurs on the specified element(s).</div>
 253 <strong>Code examples:</strong><p>Initialize the draggable with the handle option specified:</p>
 254 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ handle: </code><code class="string">"h2"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 255 <p>Get or set the handle option, after initialization:</p>
 256 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">handle = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"handle"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"handle"</code><code class="plain">, </code><code class="string">"h2"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 257 </div>
 258 <div id="option-helper" class="api-item">
 259 <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>
 260 </h3>
 261 <div class="default">
 262 <strong>Default: </strong><code>"original"</code>
 263 </div>
 264 <div>Allows for a helper element to be used for dragging display.</div>
 265 <strong>Multiple types supported:</strong><ul>
 266 <li>
 267 <strong>String</strong>: If set to <code>"clone"</code>, then the element will be cloned and the clone will be dragged.</li>
 268 <li>
 269 <strong>Function</strong>: A function that will return a DOMElement to use while dragging.</li>
 270 </ul>
 271 <strong>Code examples:</strong><p>Initialize the draggable with the helper option specified:</p>
 272 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ helper: </code><code class="string">"clone"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 273 <p>Get or set the helper option, after initialization:</p>
 274 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">helper = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"helper"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"helper"</code><code class="plain">, </code><code class="string">"clone"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 275 </div>
 276 <div id="option-iframeFix" class="api-item">
 277 <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>
 278 </h3>
 279 <div class="default">
 280 <strong>Default: </strong><code>false</code>
 281 </div>
 282 <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>
 283 <strong>Multiple types supported:</strong><ul>
 284 <li>
 285 <strong>Boolean</strong>: When set to <code>true</code>, transparent overlays will be placed over all iframes on the page.</li>
 286 <li>
 287 <strong>Selector</strong>: Any iframes matching the selector will be covered by transparent overlays.</li>
 288 </ul>
 289 <strong>Code examples:</strong><p>Initialize the draggable with the iframeFix option specified:</p>
 290 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ iframeFix: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 291 <p>Get or set the iframeFix option, after initialization:</p>
 292 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">iframeFix = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"iframeFix"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"iframeFix"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 293 </div>
 294 <div id="option-opacity" class="api-item">
 295 <h3>opacity<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a></span>
 296 </h3>
 297 <div class="default">
 298 <strong>Default: </strong><code>false</code>
 299 </div>
 300 <div>Opacity for the helper while being dragged.</div>
 301 <strong>Code examples:</strong><p>Initialize the draggable with the opacity option specified:</p>
 302 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ opacity: 0.35 });</code></div></div></td></tr></tbody></table></div>
 303 <p>Get or set the opacity option, after initialization:</p>
 304 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">opacity = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"opacity"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"opacity"</code><code class="plain">, 0.35 );</code></div></div></td></tr></tbody></table></div>
 305 </div>
 306 <div id="option-refreshPositions" class="api-item">
 307 <h3>refreshPositions<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
 308 </h3>
 309 <div class="default">
 310 <strong>Default: </strong><code>false</code>
 311 </div>
 312 <div>
 313                                 If set to <code>true</code>, all droppable positions are calculated on every mousemove.
 314                                 <em>Caution: This solves issues on highly dynamic pages, but dramatically decreases performance.</em>
 315                         </div>
 316 <strong>Code examples:</strong><p>Initialize the draggable with the refreshPositions option specified:</p>
 317 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ refreshPositions: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 318 <p>Get or set the refreshPositions option, after initialization:</p>
 319 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">refreshPositions = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"refreshPositions"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"refreshPositions"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 320 </div>
 321 <div id="option-revert" class="api-item">
 322 <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></span>
 323 </h3>
 324 <div class="default">
 325 <strong>Default: </strong><code>false</code>
 326 </div>
 327 <div>Whether the element should revert to its start position when dragging stops.</div>
 328 <strong>Multiple types supported:</strong><ul>
 329 <li>
 330 <strong>Boolean</strong>: If set to <code>true</code> the element will always revert.</li>
 331 <li>
 332 <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>
 333 </ul>
 334 <strong>Code examples:</strong><p>Initialize the draggable with the revert option specified:</p>
 335 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ revert: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 336 <p>Get or set the revert option, after initialization:</p>
 337 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">revert = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"revert"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"revert"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 338 </div>
 339 <div id="option-revertDuration" class="api-item">
 340 <h3>revertDuration<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a></span>
 341 </h3>
 342 <div class="default">
 343 <strong>Default: </strong><code>500</code>
 344 </div>
 345 <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>
 346 <strong>Code examples:</strong><p>Initialize the draggable with the revertDuration option specified:</p>
 347 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ revertDuration: 200 });</code></div></div></td></tr></tbody></table></div>
 348 <p>Get or set the revertDuration option, after initialization:</p>
 349 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">revertDuration = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"revertDuration"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"revertDuration"</code><code class="plain">, 200 );</code></div></div></td></tr></tbody></table></div>
 350 </div>
 351 <div id="option-scope" class="api-item">
 352 <h3>scope<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
 353 </h3>
 354 <div class="default">
 355 <strong>Default: </strong><code>"default"</code>
 356 </div>
 357 <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>
 358 <strong>Code examples:</strong><p>Initialize the draggable with the scope option specified:</p>
 359 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ scope: </code><code class="string">"tasks"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 360 <p>Get or set the scope option, after initialization:</p>
 361 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">scope = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"scope"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"scope"</code><code class="plain">, </code><code class="string">"tasks"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 362 </div>
 363 <div id="option-scroll" class="api-item">
 364 <h3>scroll<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
 365 </h3>
 366 <div class="default">
 367 <strong>Default: </strong><code>true</code>
 368 </div>
 369 <div>If set to <code>true</code>, container auto-scrolls while dragging.</div>
 370 <strong>Code examples:</strong><p>Initialize the draggable with the scroll option specified:</p>
 371 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ scroll: </code><code class="keyword">false</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 372 <p>Get or set the scroll option, after initialization:</p>
 373 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">scroll = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"scroll"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"scroll"</code><code class="plain">, </code><code class="keyword">false</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 374 </div>
 375 <div id="option-scrollSensitivity" class="api-item">
 376 <h3>scrollSensitivity<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a></span>
 377 </h3>
 378 <div class="default">
 379 <strong>Default: </strong><code>20</code>
 380 </div>
 381 <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>
 382 <strong>Code examples:</strong><p>Initialize the draggable with the scrollSensitivity option specified:</p>
 383 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ scrollSensitivity: 100 });</code></div></div></td></tr></tbody></table></div>
 384 <p>Get or set the scrollSensitivity option, after initialization:</p>
 385 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">scrollSensitivity = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"scrollSensitivity"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"scrollSensitivity"</code><code class="plain">, 100 );</code></div></div></td></tr></tbody></table></div>
 386 </div>
 387 <div id="option-scrollSpeed" class="api-item">
 388 <h3>scrollSpeed<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a></span>
 389 </h3>
 390 <div class="default">
 391 <strong>Default: </strong><code>20</code>
 392 </div>
 393 <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>
 394 <strong>Code examples:</strong><p>Initialize the draggable with the scrollSpeed option specified:</p>
 395 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ scrollSpeed: 100 });</code></div></div></td></tr></tbody></table></div>
 396 <p>Get or set the scrollSpeed option, after initialization:</p>
 397 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">scrollSpeed = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"scrollSpeed"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"scrollSpeed"</code><code class="plain">, 100 );</code></div></div></td></tr></tbody></table></div>
 398 </div>
 399 <div id="option-snap" class="api-item">
 400 <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>
 401 </h3>
 402 <div class="default">
 403 <strong>Default: </strong><code>false</code>
 404 </div>
 405 <div>Whether the element should snap to other elements.</div>
 406 <strong>Multiple types supported:</strong><ul>
 407 <li>
 408 <strong>Boolean</strong>: When set to <code>true</code>, the element will snap to all other draggable elements.</li>
 409 <li>
 410 <strong>Selector</strong>: A selector specifying which elements to snap to.</li>
 411 </ul>
 412 <strong>Code examples:</strong><p>Initialize the draggable with the snap option specified:</p>
 413 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ snap: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 414 <p>Get or set the snap option, after initialization:</p>
 415 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">snap = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"snap"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"snap"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 416 </div>
 417 <div id="option-snapMode" class="api-item">
 418 <h3>snapMode<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
 419 </h3>
 420 <div class="default">
 421 <strong>Default: </strong><code>"both"</code>
 422 </div>
 423 <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>
 424 <strong>Code examples:</strong><p>Initialize the draggable with the snapMode option specified:</p>
 425 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ snapMode: </code><code class="string">"inner"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 426 <p>Get or set the snapMode option, after initialization:</p>
 427 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">snapMode = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"snapMode"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"snapMode"</code><code class="plain">, </code><code class="string">"inner"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 428 </div>
 429 <div id="option-snapTolerance" class="api-item">
 430 <h3>snapTolerance<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a></span>
 431 </h3>
 432 <div class="default">
 433 <strong>Default: </strong><code>20</code>
 434 </div>
 435 <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>
 436 <strong>Code examples:</strong><p>Initialize the draggable with the snapTolerance option specified:</p>
 437 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ snapTolerance: 30 });</code></div></div></td></tr></tbody></table></div>
 438 <p>Get or set the snapTolerance option, after initialization:</p>
 439 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">snapTolerance = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"snapTolerance"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"snapTolerance"</code><code class="plain">, 30 );</code></div></div></td></tr></tbody></table></div>
 440 </div>
 441 <div id="option-stack" class="api-item">
 442 <h3>stack<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Selector">Selector</a></span>
 443 </h3>
 444 <div class="default">
 445 <strong>Default: </strong><code>false</code>
 446 </div>
 447 <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>
 448 <strong>Code examples:</strong><p>Initialize the draggable with the stack option specified:</p>
 449 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ stack: </code><code class="string">".products"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
 450 <p>Get or set the stack option, after initialization:</p>
 451 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">stack = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"stack"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"stack"</code><code class="plain">, </code><code class="string">".products"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 452 </div>
 453 <div id="option-zIndex" class="api-item">
 454 <h3>zIndex<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a></span>
 455 </h3>
 456 <div class="default">
 457 <strong>Default: </strong><code>false</code>
 458 </div>
 459 <div>Z-index for the helper while being dragged.</div>
 460 <strong>Code examples:</strong><p>Initialize the draggable with the zIndex option specified:</p>
 461 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({ zIndex: 100 });</code></div></div></td></tr></tbody></table></div>
 462 <p>Get or set the zIndex option, after initialization:</p>
 463 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">zIndex = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"zIndex"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"zIndex"</code><code class="plain">, 100 );</code></div></div></td></tr></tbody></table></div>
 464 </div></section><section id="methods"><header><h2 class="underline">Methods</h2></header><div id="method-destroy"><div class="api-item first-item">
 465 <h3>destroy()</h3>
 466 <div>
 467                 Removes the draggable functionality completely. This will return the element back to its pre-init state.
 468         </div>
 469 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
 470 <div>
 471 <strong>Code examples:</strong><p>Invoke the destroy method:</p>
 472 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"destroy"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 473 </div>
 474 </div></div>
 475 <div id="method-disable"><div class="api-item">
 476 <h3>disable()</h3>
 477 <div>
 478                 Disables the draggable.
 479         </div>
 480 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
 481 <div>
 482 <strong>Code examples:</strong><p>Invoke the disable method:</p>
 483 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"disable"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 484 </div>
 485 </div></div>
 486 <div id="method-enable"><div class="api-item">
 487 <h3>enable()</h3>
 488 <div>
 489                 Enables the draggable.
 490         </div>
 491 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
 492 <div>
 493 <strong>Code examples:</strong><p>Invoke the enable method:</p>
 494 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"enable"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 495 </div>
 496 </div></div>
 497 <div id="method-option">
 498 <div class="api-item">
 499 <h3>option( optionName )<span class="returns">Returns: <a href="http://api.jquery.com/Types#Object">Object</a></span>
 500 </h3>
 501 <div>Gets the value currently associated with the specified <code>optionName</code>.</div>
 502 <ul><li>
 503 <div><strong>optionName</strong></div>
 504 <div>Type: <a href="http://api.jquery.com/Types#String">String</a>
 505 </div>
 506 <div>The name of the option to get.</div>
 507 </li></ul>
 508 <div>
 509 <strong>Code examples:</strong><p>Invoke the  method:</p>
 510 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="keyword">var</code> <code class="plain">isDisabled = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 511 </div>
 512 </div>
 513 <div class="api-item">
 514 <h3>option()<span class="returns">Returns: <a href="http://api.jquery.com/Types#PlainObject">PlainObject</a></span>
 515 </h3>
 516 <div>Gets an object containing key/value pairs representing the current draggable options hash.</div>
 517 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
 518 <div>
 519 <strong>Code examples:</strong><p>Invoke the  method:</p>
 520 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="keyword">var</code> <code class="plain">options = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 521 </div>
 522 </div>
 523 <div class="api-item">
 524 <h3>option( optionName, value )</h3>
 525 <div>Sets the value of the draggable option associated with the specified <code>optionName</code>.</div>
 526 <ul>
 527 <li>
 528 <div><strong>optionName</strong></div>
 529 <div>Type: <a href="http://api.jquery.com/Types#String">String</a>
 530 </div>
 531 <div>The name of the option to set.</div>
 532 </li>
 533 <li>
 534 <div><strong>value</strong></div>
 535 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 536 </div>
 537 <div>A value to set for the option.</div>
 538 </li>
 539 </ul>
 540 <div>
 541 <strong>Code examples:</strong><p>Invoke the  method:</p>
 542 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 543 </div>
 544 </div>
 545 <div class="api-item">
 546 <h3>option( options )</h3>
 547 <div>Sets one or more options for the draggable.</div>
 548 <ul><li>
 549 <div><strong>options</strong></div>
 550 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 551 </div>
 552 <div>A map of option-value pairs to set.</div>
 553 </li></ul>
 554 <div>
 555 <strong>Code examples:</strong><p>Invoke the  method:</p>
 556 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"option"</code><code class="plain">, { disabled: </code><code class="keyword">true</code> <code class="plain">} );</code></div></div></td></tr></tbody></table></div>
 557 </div>
 558 </div>
 559 </div>
 560 <div id="method-widget"><div class="api-item">
 561 <h3>widget()<span class="returns">Returns: <a href="http://api.jquery.com/Types#jQuery">jQuery</a></span>
 562 </h3>
 563 <div>
 564                 Returns a <code>jQuery</code> object containing the draggable element.
 565         </div>
 566 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
 567 <div>
 568 <strong>Code examples:</strong><p>Invoke the widget method:</p>
 569 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="keyword">var</code> <code class="plain">widget = $( </code><code class="string">".selector"</code> <code class="plain">).draggable( </code><code class="string">"widget"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
 570 </div>
 571 </div></div></section><section id="events"><header><h2 class="underline">Events</h2></header><div id="event-create" class="api-item first-item">
 572 <h3>create( event, ui )<span class="returns">Type: <code>dragcreate</code></span>
 573 </h3>
 574 <div>
 575                 Triggered when the draggable is created.
 576         </div>
 577 <ul>
 578 <li>
 579 <div><strong>event</strong></div>
 580 <div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
 581 </div>
 582 <div></div>
 583 </li>
 584 <li>
 585 <div><strong>ui</strong></div>
 586 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 587 </div>
 588 <div></div>
 589 </li>
 590 </ul>
 591 <div>
 592 <strong>Code examples:</strong><p>Initialize the draggable with the create callback specified:</p>
 593 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">create: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
 594 <p>Bind an event listener to the dragcreate event:</p>
 595 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"dragcreate"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
 596 </div>
 597 </div>
 598 <div id="event-drag" class="api-item">
 599 <h3>drag( event, ui )<span class="returns">Type: <code>drag</code></span>
 600 </h3>
 601 <div>Triggered while the mouse is moved during the dragging.</div>
 602 <ul>
 603 <li>
 604 <div><strong>event</strong></div>
 605 <div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
 606 </div>
 607 <div></div>
 608 </li>
 609 <li>
 610 <div><strong>ui</strong></div>
 611 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 612 </div>
 613 <div></div>
 614 <ul>
 615 <li>
 616 <div><strong>helper</strong></div>
 617 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
 618 </div>
 619 <div>The jQuery object representing the helper that's being dragged.</div>
 620 </li>
 621 <li>
 622 <div><strong>position</strong></div>
 623 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 624 </div>
 625 <div>Current CSS position of the helper as <code>{ top, left }</code> object.</div>
 626 </li>
 627 <li>
 628 <div><strong>offset</strong></div>
 629 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 630 </div>
 631 <div>Current offset position of the helper as <code>{ top, left }</code> object.</div>
 632 </li>
 633 </ul>
 634 </li>
 635 </ul>
 636 <div>
 637 <strong>Code examples:</strong><p>Initialize the draggable with the drag callback specified:</p>
 638 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">drag: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
 639 <p>Bind an event listener to the drag event:</p>
 640 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"drag"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
 641 </div>
 642 </div>
 643 <div id="event-start" class="api-item">
 644 <h3>start( event, ui )<span class="returns">Type: <code>dragstart</code></span>
 645 </h3>
 646 <div>Triggered when dragging starts.</div>
 647 <ul>
 648 <li>
 649 <div><strong>event</strong></div>
 650 <div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
 651 </div>
 652 <div></div>
 653 </li>
 654 <li>
 655 <div><strong>ui</strong></div>
 656 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 657 </div>
 658 <div></div>
 659 <ul>
 660 <li>
 661 <div><strong>helper</strong></div>
 662 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
 663 </div>
 664 <div>The jQuery object representing the helper that's being dragged.</div>
 665 </li>
 666 <li>
 667 <div><strong>position</strong></div>
 668 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 669 </div>
 670 <div>Current CSS position of the helper as <code>{ top, left }</code> object.</div>
 671 </li>
 672 <li>
 673 <div><strong>offset</strong></div>
 674 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 675 </div>
 676 <div>Current offset position of the helper as <code>{ top, left }</code> object.</div>
 677 </li>
 678 </ul>
 679 </li>
 680 </ul>
 681 <div>
 682 <strong>Code examples:</strong><p>Initialize the draggable with the start callback specified:</p>
 683 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">start: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
 684 <p>Bind an event listener to the dragstart event:</p>
 685 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"dragstart"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
 686 </div>
 687 </div>
 688 <div id="event-stop" class="api-item">
 689 <h3>stop( event, ui )<span class="returns">Type: <code>dragstop</code></span>
 690 </h3>
 691 <div>Triggered when dragging stops.</div>
 692 <ul>
 693 <li>
 694 <div><strong>event</strong></div>
 695 <div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
 696 </div>
 697 <div></div>
 698 </li>
 699 <li>
 700 <div><strong>ui</strong></div>
 701 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 702 </div>
 703 <div></div>
 704 <ul>
 705 <li>
 706 <div><strong>helper</strong></div>
 707 <div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
 708 </div>
 709 <div>The jQuery object representing the helper that's being dragged.</div>
 710 </li>
 711 <li>
 712 <div><strong>position</strong></div>
 713 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 714 </div>
 715 <div>Current CSS position of the helper as <code>{ top, left }</code> object.</div>
 716 </li>
 717 <li>
 718 <div><strong>offset</strong></div>
 719 <div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
 720 </div>
 721 <div>Current offset position of the helper as <code>{ top, left }</code> object.</div>
 722 </li>
 723 </ul>
 724 </li>
 725 </ul>
 726 <div>
 727 <strong>Code examples:</strong><p>Initialize the draggable with the stop callback specified:</p>
 728 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).draggable({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">stop: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
 729 <p>Bind an event listener to the dragstop event:</p>
 730 <div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"dragstop"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
 731 </div>
 732 </div></section><section class="entry-examples" id="entry-examples"><header><h2 class="underline">Example:</h2></header><div class="entry-example" id="example-0">
 733 <h4><span class="desc">A simple jQuery UI Draggable</span></h4>
 734 <div class="syntaxhighlighter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div><div class="line number11 index10 alt2">11</div><div class="line number12 index11 alt1">12</div><div class="line number13 index12 alt2">13</div><div class="line number14 index13 alt1">14</div><div class="line number15 index14 alt2">15</div><div class="line number16 index15 alt1">16</div><div class="line number17 index16 alt2">17</div><div class="line number18 index17 alt1">18</div><div class="line number19 index18 alt2">19</div><div class="line number20 index19 alt1">20</div><div class="line number21 index20 alt2">21</div><div class="line number22 index21 alt1">22</div><div class="line number23 index22 alt2">23</div><div class="line number24 index23 alt1">24</div><div class="line number25 index24 alt2">25</div><div class="line number26 index25 alt1">26</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">&lt;!doctype html&gt;</code></div><div class="line number2 index1 alt1"><code class="plain">&lt;</code><code class="keyword">html</code> <code class="color1">lang</code><code class="plain">=</code><code class="string">"en"</code><code class="plain">&gt;</code></div><div class="line number3 index2 alt2"><code class="plain">&lt;</code><code class="keyword">head</code><code class="plain">&gt;</code></div><div class="line number4 index3 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">meta</code> <code class="color1">charset</code><code class="plain">=</code><code class="string">"utf-8"</code><code class="plain">&gt;</code></div><div class="line number5 index4 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">title</code><code class="plain">&gt;draggable demo&lt;/</code><code class="keyword">title</code><code class="plain">&gt;</code></div><div class="line number6 index5 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">link</code> <code class="color1">rel</code><code class="plain">=</code><code class="string">"stylesheet"</code> <code class="color1">href</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css</a>"</code><code class="plain">&gt;</code></div><div class="line number7 index6 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">style</code><code class="plain">&gt;</code></div><div class="line number8 index7 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">#draggable {</code></div><div class="line number9 index8 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">width: 100px;</code></div><div class="line number10 index9 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">height: 100px;</code></div><div class="line number11 index10 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">background: #ccc;</code></div><div class="line number12 index11 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></div><div class="line number13 index12 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;/</code><code class="keyword">style</code><code class="plain">&gt;</code></div><div class="line number14 index13 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">script</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/jquery-1.8.3.js">http://code.jquery.com/jquery-1.8.3.js</a>"</code><code class="plain">&gt;&lt;/</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number15 index14 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">script</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/ui/1.9.2/jquery-ui.js">http://code.jquery.com/ui/1.9.2/jquery-ui.js</a>"</code><code class="plain">&gt;&lt;/</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number16 index15 alt1"><code class="plain">&lt;/</code><code class="keyword">head</code><code class="plain">&gt;</code></div><div class="line number17 index16 alt2"><code class="plain">&lt;</code><code class="keyword">body</code><code class="plain">&gt;</code></div><div class="line number18 index17 alt1">&nbsp;</div><div class="line number19 index18 alt2"><code class="plain">&lt;</code><code class="keyword">div</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"draggable"</code><code class="plain">&gt;Drag me&lt;/</code><code class="keyword">div</code><code class="plain">&gt;</code></div><div class="line number20 index19 alt1">&nbsp;</div><div class="line number21 index20 alt2"><code class="plain">&lt;</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number22 index21 alt1"><code class="plain">$( "#draggable" ).draggable();</code></div><div class="line number23 index22 alt2"><code class="plain">&lt;/</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number24 index23 alt1">&nbsp;</div><div class="line number25 index24 alt2"><code class="plain">&lt;/</code><code class="keyword">body</code><code class="plain">&gt;</code></div><div class="line number26 index25 alt1"><code class="plain">&lt;/</code><code class="keyword">html</code><code class="plain">&gt;</code></div></div></td></tr></tbody></table></div>
 735 <h4>Demo:</h4>
 736 <div class="demo code-demo"></div>
 737 </div></section>
 738 </div></article>
 739
 740 </body>
 741 </html>