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 & 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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"><!doctype html></code></div><div class="line number2 index1 alt1"><code class="plain"><</code><code class="keyword">html</code> <code class="color1">lang</code><code class="plain">=</code><code class="string">"en"</code><code class="plain">></code></div><div class="line number3 index2 alt2"><code class="plain"><</code><code class="keyword">head</code><code class="plain">></code></div><div class="line number4 index3 alt1"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">meta</code> <code class="color1">charset</code><code class="plain">=</code><code class="string">"utf-8"</code><code class="plain">></code></div><div class="line number5 index4 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">title</code><code class="plain">>draggable demo</</code><code class="keyword">title</code><code class="plain">></code></div><div class="line number6 index5 alt1"><code class="undefined spaces"> </code><code class="plain"><</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">></code></div><div class="line number7 index6 alt2"><code class="undefined spaces"> </code><code class="plain"><</code><code class="keyword">style</code><code class="plain">></code></div><div class="line number8 index7 alt1"><code class="undefined spaces"> </code><code class="plain">#draggable {</code></div><div class="line number9 index8 alt2"><code class="undefined spaces"> </code><code class="plain">width: 100px;</code></div><div class="line number10 index9 alt1"><code class="undefined spaces"> </code><code class="plain">height: 100px;</code></div><div class="line number11 index10 alt2"><code class="undefined spaces"> </code><code class="plain">background: #ccc;</code></div><div class="line number12 index11 alt1"><code class="undefined spaces"> </code><code class="plain">}</code></div><div class="line number13 index12 alt2"><code class="undefined spaces"> </code><code class="plain"></</code><code class="keyword">style</code><code class="plain">></code></div><div class="line number14 index13 alt1"><code class="undefined spaces"> </code><code class="plain"><</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">></</code><code class="keyword">script</code><code class="plain">></code></div><div class="line number15 index14 alt2"><code class="undefined spaces"> </code><code class="plain"><</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">></</code><code class="keyword">script</code><code class="plain">></code></div><div class="line number16 index15 alt1"><code class="plain"></</code><code class="keyword">head</code><code class="plain">></code></div><div class="line number17 index16 alt2"><code class="plain"><</code><code class="keyword">body</code><code class="plain">></code></div><div class="line number18 index17 alt1"> </div><div class="line number19 index18 alt2"><code class="plain"><</code><code class="keyword">div</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"draggable"</code><code class="plain">>Drag me</</code><code class="keyword">div</code><code class="plain">></code></div><div class="line number20 index19 alt1"> </div><div class="line number21 index20 alt2"><code class="plain"><</code><code class="keyword">script</code><code class="plain">></code></div><div class="line number22 index21 alt1"><code class="plain">$( "#draggable" ).draggable();</code></div><div class="line number23 index22 alt2"><code class="plain"></</code><code class="keyword">script</code><code class="plain">></code></div><div class="line number24 index23 alt1"> </div><div class="line number25 index24 alt2"><code class="plain"></</code><code class="keyword">body</code><code class="plain">></code></div><div class="line number26 index25 alt1"><code class="plain"></</code><code class="keyword">html</code><code class="plain">></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> |
---|