http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/docs/draggable.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/docs/draggable.html b/content/development-bundle/docs/draggable.html new file mode 100644 index 0000000..0c3ac03 --- /dev/null +++ b/content/development-bundle/docs/draggable.html @@ -0,0 +1,2212 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI draggable documentation</title> + + <style> + body { + font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif" + } + .gutter { + display: none; + } + </style> +</head> +<body> + +<script>{ + "title": + "Draggable Widget", + "excerpt": + "Allow elements to be moved using the mouse.", + "termSlugs": { + "category": [ + "interactions" + ] + } + }</script><article id="draggable1" class="entry widget"><h2 class="section-title"> +<span>Draggable Widget</span><span class="version-details">version added: 1.0</span> +</h2> +<div class="entry-wrapper"> +<p class="desc"><strong>Description: </strong>Allow elements to be moved using the mouse.</p> +<section id="quick-nav"><header><h2>QuickNav<a href="#entry-examples">Examples</a> +</h2></header><div class="quick-nav-section"> +<h3>Options</h3> +<div><a href="#option-addClasses">addClasses</a></div> +<div><a href="#option-appendTo">appendTo</a></div> +<div><a href="#option-axis">axis</a></div> +<div><a href="#option-cancel">cancel</a></div> +<div><a href="#option-connectToSortable">connectToSortable</a></div> +<div><a href="#option-containment">containment</a></div> +<div><a href="#option-cursor">cursor</a></div> +<div><a href="#option-cursorAt">cursorAt</a></div> +<div><a href="#option-delay">delay</a></div> +<div><a href="#option-disabled">disabled</a></div> +<div><a href="#option-distance">distance</a></div> +<div><a href="#option-grid">grid</a></div> +<div><a href="#option-handle">handle</a></div> +<div><a href="#option-helper">helper</a></div> +<div><a href="#option-iframeFix">iframeFix</a></div> +<div><a href="#option-opacity">opacity</a></div> +<div><a href="#option-refreshPositions">refreshPositions</a></div> +<div><a href="#option-revert">revert</a></div> +<div><a href="#option-revertDuration">revertDuration</a></div> +<div><a href="#option-scope">scope</a></div> +<div><a href="#option-scroll">scroll</a></div> +<div><a href="#option-scrollSensitivity">scrollSensitivity</a></div> +<div><a href="#option-scrollSpeed">scrollSpeed</a></div> +<div><a href="#option-snap">snap</a></div> +<div><a href="#option-snapMode">snapMode</a></div> +<div><a href="#option-snapTolerance">snapTolerance</a></div> +<div><a href="#option-stack">stack</a></div> +<div><a href="#option-zIndex">zIndex</a></div> +</div> +<div class="quick-nav-section"> +<h3>Methods</h3> +<div><a href="#method-destroy">destroy</a></div> +<div><a href="#method-disable">disable</a></div> +<div><a href="#method-enable">enable</a></div> +<div><a href="#method-option">option</a></div> +<div><a href="#method-widget">widget</a></div> +</div> +<div class="quick-nav-section"> +<h3>Events</h3> +<div><a href="#event-create">create</a></div> +<div><a href="#event-drag">drag</a></div> +<div><a href="#event-start">start</a></div> +<div><a href="#event-stop">stop</a></div> +</div></section><div class="longdesc" id="entry-longdesc"> + <p>Make the selected elements draggable by mouse. If you want not just drag, but drag & drop, see the <a href="/droppable/">jQuery UI Droppable plugin</a>, which provides a drop target for draggables.</p> + + <h3>Dependencies</h3> + <ul> + <li><a href="/category/ui-core/">UI Core</a></li> + <li><a href="/jQuery.widget/">Widget Factory</a></li> + <li><a href="/mouse/">Mouse Interaction</a></li> + </ul> + </div> +<section id="options"><header><h2>Options</h2></header><div id="option-addClasses" class="api-item first-item"> +<h3>addClasses<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean";>Boolean</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>true</code> +</div> +<div>If set to <code>false</code>, will prevent the <code>ui-draggable</code> class from being added. This may be desired as a performance optimization when calling <code>.draggable()</code> on hundreds of elements.</div> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>addClasses</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ addClasses: <span class="literal">false</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>addClasses</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> addClasses = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"addClasses"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"addClasses"</span>, <span class="literal">false</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-appendTo" class="api-item"> +<h3>appendTo<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#jQuery";>jQuery</a> or <a href="http://api.jquery.com/Types/#Element";>Element</a> or <a href="http://api.jquery.com/Types/#Selector";>Selector</a> or <a href="http://api.jquery.com/Types/#String";>String</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>"parent"</code> +</div> +<div>Which element the draggable helper should be appended to while dragging.</div> +<strong>Multiple types supported:</strong><ul> +<li> +<strong>jQuery</strong>: A jQuery object containing the element to append the helper to.</li> +<li> +<strong>Element</strong>: The element to append the helper to.</li> +<li> +<strong>Selector</strong>: A selector specifying which element to append the helper to.</li> +<li> +<strong>String</strong>: The string <code>"parent"</code> will cause the helper to be a sibling of the draggable.</li> +</ul> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>appendTo</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ appendTo: <span class="string">"body"</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>appendTo</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> appendTo = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"appendTo"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"appendTo"</span>, <span class="string">"body"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-axis" class="api-item"> +<h3>axis<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String";>String</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>false</code> +</div> +<div>Constrains dragging to either the horizontal (x) or vertical (y) axis. Possible values: <code>"x"</code>, <code>"y"</code>.</div> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>axis</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ axis: <span class="string">"x"</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>axis</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> axis = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"axis"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"axis"</span>, <span class="string">"x"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-cancel" class="api-item"> +<h3>cancel<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Selector";>Selector</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>"input,textarea,button,select,option"</code> +</div> +<div>Prevents dragging from starting on specified elements.</div> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>cancel</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ cancel: <span class="string">".title"</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>cancel</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> cancel = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"cancel"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"cancel"</span>, <span class="string">".title"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-connectToSortable" class="api-item"> +<h3>connectToSortable<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Selector";>Selector</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>false</code> +</div> +<div>Allows the draggable to be dropped onto the specified sortables. If this option is used, a draggable can be dropped onto a sortable list and then becomes part of it. Note: The <a href="#option-helper"><code>helper</code></a> option must be set to <code>"clone"</code> in order to work flawlessly. Requires the <a href="/sortable/">jQuery UI Sortable plugin</a> to be included.</div> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>connectToSortable</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ connectToSortable: <span class="string">"#my-sortable"</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>connectToSortable</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> connectToSortable = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"connectToSortable"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"connectToSortable"</span>, <span class="string">"#my-sortable"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-containment" class="api-item"> +<h3>containment<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Selector";>Selector</a> or <a href="http://api.jquery.com/Types/#Element";>Element</a> or <a href="http://api.jquery.com/Types/#String";>String</a> or <a href="http://api.jquery.com/Types/#Array";>Array</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>false</code> +</div> +<div>Constrains dragging to within the bounds of the specified element or region.</div> +<strong>Multiple types supported:</strong><ul> +<li> +<strong>Selector</strong>: The draggable element will be contained to the bounding box of the first element found by the selector. If no element is found, no containment will be set.</li> +<li> +<strong>Element</strong>: The draggable element will be contained to the bounding box of this element.</li> +<li> +<strong>String</strong>: Possible values: <code>"parent"</code>, <code>"document"</code>, <code>"window"</code>.</li> +<li> +<strong>Array</strong>: An array defining a bounding box in the form <code>[ x1, y1, x2, y2 ]</code>.</li> +</ul> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>containment</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ containment: <span class="string">"parent"</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>containment</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> containment = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"containment"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"containment"</span>, <span class="string">"parent"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-cursor" class="api-item"> +<h3>cursor<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String";>String</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>"auto"</code> +</div> +<div>The CSS cursor during the drag operation.</div> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>cursor</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ cursor: <span class="string">"crosshair"</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>cursor</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> cursor = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"cursor"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"cursor"</span>, <span class="string">"crosshair"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-cursorAt" class="api-item"> +<h3>cursorAt<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Object";>Object</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>false</code> +</div> +<div>Sets the offset of the dragging helper relative to the mouse cursor. Coordinates can be given as a hash using a combination of one or two keys: <code>{ top, left, right, bottom }</code>.</div> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>cursorAt</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ cursorAt: { left: <span class="number">5</span> } });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>cursorAt</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> cursorAt = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"cursorAt"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"cursorAt"</span>, { left: <span class="number">5</span> } );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-delay" class="api-item"> +<h3>delay<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number";>Number</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>0</code> +</div> +<div>Time in milliseconds after mousedown until dragging should start. This option can be used to prevent unwanted drags when clicking on an element.</div> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>delay</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ delay: <span class="number">300</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>delay</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> delay = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"delay"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"delay"</span>, <span class="number">300</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-disabled" class="api-item"> +<h3>disabled<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean";>Boolean</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>false</code> +</div> +<div>Disables the draggable if set to <code>true</code>.</div> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>disabled</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ disabled: <span class="literal">true</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>disabled</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> disabled = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"disabled"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"disabled"</span>, <span class="literal">true</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-distance" class="api-item"> +<h3>distance<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number";>Number</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>1</code> +</div> +<div>Distance in pixels after mousedown the mouse must move before dragging should start. This option can be used to prevent unwanted drags when clicking on an element.</div> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>distance</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ distance: <span class="number">10</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>distance</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> distance = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"distance"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"distance"</span>, <span class="number">10</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-grid" class="api-item"> +<h3>grid<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Array";>Array</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>false</code> +</div> +<div>Snaps the dragging helper to a grid, every x and y pixels. The array must be of the form <code>[ x, y ]</code>.</div> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>grid</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ grid: [ <span class="number">50</span>, <span class="number">20</span> ] });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>grid</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> grid = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"grid"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"grid"</span>, [ <span class="number">50</span>, <span class="number">20</span> ] );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-handle" class="api-item"> +<h3>handle<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Selector";>Selector</a> or <a href="http://api.jquery.com/Types/#Element";>Element</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>false</code> +</div> +<div>If specified, restricts dragging from starting unless the mousedown occurs on the specified element(s).</div> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>handle</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ handle: <span class="string">"h2"</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>handle</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> handle = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"handle"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"handle"</span>, <span class="string">"h2"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-helper" class="api-item"> +<h3>helper<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String";>String</a> or <a href="http://api.jquery.com/Types/#Function";>Function</a>()</span> +</h3> +<div class="default"> +<strong>Default: </strong><code>"original"</code> +</div> +<div>Allows for a helper element to be used for dragging display.</div> +<strong>Multiple types supported:</strong><ul> +<li> +<strong>String</strong>: If set to <code>"clone"</code>, then the element will be cloned and the clone will be dragged.</li> +<li> +<strong>Function</strong>: A function that will return a DOMElement to use while dragging.</li> +</ul> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>helper</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ helper: <span class="string">"clone"</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>helper</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> helper = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"helper"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"helper"</span>, <span class="string">"clone"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-iframeFix" class="api-item"> +<h3>iframeFix<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean";>Boolean</a> or <a href="http://api.jquery.com/Types/#Selector";>Selector</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>false</code> +</div> +<div>Prevent iframes from capturing the mousemove events during a drag. Useful in combination with the <a href="#option-cursorAt"><code>cursorAt</code></a> option, or in any case where the mouse cursor may not be over the helper.</div> +<strong>Multiple types supported:</strong><ul> +<li> +<strong>Boolean</strong>: When set to <code>true</code>, transparent overlays will be placed over all iframes on the page.</li> +<li> +<strong>Selector</strong>: Any iframes matching the selector will be covered by transparent overlays.</li> +</ul> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>iframeFix</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ iframeFix: <span class="literal">true</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>iframeFix</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> iframeFix = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"iframeFix"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"iframeFix"</span>, <span class="literal">true</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-opacity" class="api-item"> +<h3>opacity<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number";>Number</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>false</code> +</div> +<div>Opacity for the helper while being dragged.</div> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>opacity</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ opacity: <span class="number">0.35</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>opacity</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> opacity = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"opacity"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"opacity"</span>, <span class="number">0.35</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-refreshPositions" class="api-item"> +<h3>refreshPositions<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean";>Boolean</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>false</code> +</div> +<div> + If set to <code>true</code>, all droppable positions are calculated on every mousemove. + <em>Caution: This solves issues on highly dynamic pages, but dramatically decreases performance.</em> + </div> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>refreshPositions</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ refreshPositions: <span class="literal">true</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>refreshPositions</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> refreshPositions = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"refreshPositions"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"refreshPositions"</span>, <span class="literal">true</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-revert" class="api-item"> +<h3>revert<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean";>Boolean</a> or <a href="http://api.jquery.com/Types/#String";>String</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>false</code> +</div> +<div>Whether the element should revert to its start position when dragging stops.</div> +<strong>Multiple types supported:</strong><ul> +<li> +<strong>Boolean</strong>: If set to <code>true</code> the element will always revert.</li> +<li> +<strong>String</strong>: If set to <code>"invalid"</code>, revert will only occur if the draggable has not been dropped on a droppable. For <code>"valid"</code>, it's the other way around.</li> +</ul> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>revert</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ revert: <span class="literal">true</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>revert</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> revert = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"revert"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"revert"</span>, <span class="literal">true</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-revertDuration" class="api-item"> +<h3>revertDuration<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number";>Number</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>500</code> +</div> +<div>The duration of the revert animation, in milliseconds. Ignored if the <a href="#option-revert"><code>revert</code></a> option is <code>false</code>.</div> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>revertDuration</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ revertDuration: <span class="number">200</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>revertDuration</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> revertDuration = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"revertDuration"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"revertDuration"</span>, <span class="number">200</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-scope" class="api-item"> +<h3>scope<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String";>String</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>"default"</code> +</div> +<div>Used to group sets of draggable and droppable items, in addition to droppable's <a href="/droppable#option-accept"><code>accept</code></a> option. A draggable with the same <code>scope</code> value as a droppable will be accepted by the droppable.</div> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>scope</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ scope: <span class="string">"tasks"</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>scope</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> scope = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"scope"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"scope"</span>, <span class="string">"tasks"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-scroll" class="api-item"> +<h3>scroll<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean";>Boolean</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>true</code> +</div> +<div>If set to <code>true</code>, container auto-scrolls while dragging.</div> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>scroll</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ scroll: <span class="literal">false</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>scroll</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> scroll = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"scroll"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"scroll"</span>, <span class="literal">false</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-scrollSensitivity" class="api-item"> +<h3>scrollSensitivity<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number";>Number</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>20</code> +</div> +<div>Distance in pixels from the edge of the viewport after which the viewport should scroll. Distance is relative to pointer, not the draggable. Ignored if the <a href="#option-scroll"><code>scroll</code></a> option is <code>false</code>.</div> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>scrollSensitivity</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ scrollSensitivity: <span class="number">100</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>scrollSensitivity</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> scrollSensitivity = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"scrollSensitivity"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"scrollSensitivity"</span>, <span class="number">100</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-scrollSpeed" class="api-item"> +<h3>scrollSpeed<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number";>Number</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>20</code> +</div> +<div>The speed at which the window should scroll once the mouse pointer gets within the <a href="#option-scrollSensitivity"><code>scrollSensitivity</code></a> distance. Ignored if the <a href="#option-scroll"><code>scroll</code></a> option is <code>false</code>.</div> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>scrollSpeed</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ scrollSpeed: <span class="number">100</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>scrollSpeed</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> scrollSpeed = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"scrollSpeed"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"scrollSpeed"</span>, <span class="number">100</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-snap" class="api-item"> +<h3>snap<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean";>Boolean</a> or <a href="http://api.jquery.com/Types/#Selector";>Selector</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>false</code> +</div> +<div>Whether the element should snap to other elements.</div> +<strong>Multiple types supported:</strong><ul> +<li> +<strong>Boolean</strong>: When set to <code>true</code>, the element will snap to all other draggable elements.</li> +<li> +<strong>Selector</strong>: A selector specifying which elements to snap to.</li> +</ul> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>snap</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ snap: <span class="literal">true</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>snap</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> snap = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"snap"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"snap"</span>, <span class="literal">true</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-snapMode" class="api-item"> +<h3>snapMode<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String";>String</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>"both"</code> +</div> +<div>Determines which edges of snap elements the draggable will snap to. Ignored if the <a href="#option-snap"><code>snap</code></a> option is <code>false</code>. Possible values: <code>"inner"</code>, <code>"outer"</code>, <code>"both"</code>.</div> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>snapMode</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ snapMode: <span class="string">"inner"</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>snapMode</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> snapMode = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"snapMode"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"snapMode"</span>, <span class="string">"inner"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-snapTolerance" class="api-item"> +<h3>snapTolerance<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number";>Number</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>20</code> +</div> +<div>The distance in pixels from the snap element edges at which snapping should occur. Ignored if the <a href="#option-snap"><code>snap</code></a> option is <code>false</code>.</div> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>snapTolerance</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ snapTolerance: <span class="number">30</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>snapTolerance</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> snapTolerance = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"snapTolerance"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"snapTolerance"</span>, <span class="number">30</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-stack" class="api-item"> +<h3>stack<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Selector";>Selector</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>false</code> +</div> +<div>Controls the z-index of the set of elements that match the selector, always brings the currently dragged item to the front. Very useful in things like window managers.</div> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>stack</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ stack: <span class="string">".products"</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>stack</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> stack = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"stack"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"stack"</span>, <span class="string">".products"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-zIndex" class="api-item"> +<h3>zIndex<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number";>Number</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>false</code> +</div> +<div>Z-index for the helper while being dragged.</div> +<strong>Code examples:</strong><p>Initialize the draggable with the <code>zIndex</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({ zIndex: <span class="number">100</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>zIndex</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> zIndex = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"zIndex"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"zIndex"</span>, <span class="number">100</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div></section><section id="methods"><header><h2>Methods</h2></header><div id="method-destroy"><div class="api-item first-item"> +<h3>destroy()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery";>jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/";>plugin only</a>)</span> +</h3> +<div> + Removes the draggable functionality completely. This will return the element back to its pre-init state. + </div> +<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul> +<div> +<strong>Code examples:</strong><p>Invoke the destroy method:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"destroy"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +</div></div> +<div id="method-disable"><div class="api-item"> +<h3>disable()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery";>jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/";>plugin only</a>)</span> +</h3> +<div> + Disables the draggable. + </div> +<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul> +<div> +<strong>Code examples:</strong><p>Invoke the disable method:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"disable"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +</div></div> +<div id="method-enable"><div class="api-item"> +<h3>enable()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery";>jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/";>plugin only</a>)</span> +</h3> +<div> + Enables the draggable. + </div> +<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul> +<div> +<strong>Code examples:</strong><p>Invoke the enable method:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"enable"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +</div></div> +<div id="method-option"> +<div class="api-item"> +<h3>option( optionName )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#Object";>Object</a></span> +</h3> +<div>Gets the value currently associated with the specified <code>optionName</code>.</div> +<ul><li> +<div><strong>optionName</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#String";>String</a> +</div> +<div>The name of the option to get.</div> +</li></ul> +<div> +<strong>Code examples:</strong><p>Invoke the method:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="keyword">var</span> isDisabled = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"disabled"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +</div> +<div class="api-item"> +<h3>option()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#PlainObject";>PlainObject</a></span> +</h3> +<div>Gets an object containing key/value pairs representing the current draggable options hash.</div> +<ul><li><div class="null-signature">This signature does not accept any arguments.</div></li></ul> +<div> +<strong>Code examples:</strong><p>Invoke the method:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="keyword">var</span> options = $( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +</div> +<div class="api-item"> +<h3>option( optionName, value )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery";>jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/";>plugin only</a>)</span> +</h3> +<div>Sets the value of the draggable option associated with the specified <code>optionName</code>.</div> +<ul> +<li> +<div><strong>optionName</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#String";>String</a> +</div> +<div>The name of the option to set.</div> +</li> +<li> +<div><strong>value</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#Object";>Object</a> +</div> +<div>A value to set for the option.</div> +</li> +</ul> +<div> +<strong>Code examples:</strong><p>Invoke the method:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, <span class="string">"disabled"</span>, <span class="literal">true</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +</div> +<div class="api-item"> +<h3>option( options )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery";>jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/";>plugin only</a>)</span> +</h3> +<div>Sets one or more options for the draggable.</div> +<ul><li> +<div><strong>options</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#Object";>Object</a> +</div> +<div>A map of option-value pairs to set.</div> +</li></ul> +<div> +<strong>Code examples:</strong><p>Invoke the method:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable( <span class="string">"option"</span>, { disabled: <span class="literal">true</span> } );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +</div> +</div> +<div id="method-widget"><div class="api-item"> +<h3>widget()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery";>jQuery</a></span> +</h3> +<div> + Returns a <code>jQuery</code> object containing the draggable element. + </div> +<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul> +<div> +<strong>Code examples:</strong><p>Invoke the widget method:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="keyword">var</span> widget = $( <span class="string">".selector"</span> ).draggable( <span class="string">"widget"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +</div></div></section><section id="events"><header><h2>Events</h2></header><div id="event-create" class="api-item first-item"> +<h3>create( event, ui )<span class="returns">Type: <code>dragcreate</code></span> +</h3> +<div> + Triggered when the draggable is created. + </div> +<ul> +<li> +<div><strong>event</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#Event";>Event</a> +</div> +<div></div> +</li> +<li> +<div><strong>ui</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#Object";>Object</a> +</div> +<div></div> +</li> +</ul> +<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p> +<div> +<strong>Code examples:</strong><p>Initialize the draggable with the create callback specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({</code></div></div><div class="container"><div class="line"><code> create: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Bind an event listener to the dragcreate event:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dragcreate"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +</div> +<div id="event-drag" class="api-item"> +<h3>drag( event, ui )<span class="returns">Type: <code>drag</code></span> +</h3> +<div>Triggered while the mouse is moved during the dragging.</div> +<ul> +<li> +<div><strong>event</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#Event";>Event</a> +</div> +<div></div> +</li> +<li> +<div><strong>ui</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#Object";>Object</a> +</div> +<div></div> +<ul> +<li> +<div><strong>helper</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#jQuery";>jQuery</a> +</div> +<div>The jQuery object representing the helper that's being dragged.</div> +</li> +<li> +<div><strong>position</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#Object";>Object</a> +</div> +<div>Current CSS position of the helper as <code>{ top, left }</code> object.</div> +</li> +<li> +<div><strong>offset</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#Object";>Object</a> +</div> +<div>Current offset position of the helper as <code>{ top, left }</code> object.</div> +</li> +</ul> +</li> +</ul> +<div> +<strong>Code examples:</strong><p>Initialize the draggable with the drag callback specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({</code></div></div><div class="container"><div class="line"><code> drag: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Bind an event listener to the drag event:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"drag"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +</div> +<div id="event-start" class="api-item"> +<h3>start( event, ui )<span class="returns">Type: <code>dragstart</code></span> +</h3> +<div>Triggered when dragging starts.</div> +<ul> +<li> +<div><strong>event</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#Event";>Event</a> +</div> +<div></div> +</li> +<li> +<div><strong>ui</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#Object";>Object</a> +</div> +<div></div> +<ul> +<li> +<div><strong>helper</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#jQuery";>jQuery</a> +</div> +<div>The jQuery object representing the helper that's being dragged.</div> +</li> +<li> +<div><strong>position</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#Object";>Object</a> +</div> +<div>Current CSS position of the helper as <code>{ top, left }</code> object.</div> +</li> +<li> +<div><strong>offset</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#Object";>Object</a> +</div> +<div>Current offset position of the helper as <code>{ top, left }</code> object.</div> +</li> +</ul> +</li> +</ul> +<div> +<strong>Code examples:</strong><p>Initialize the draggable with the start callback specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({</code></div></div><div class="container"><div class="line"><code> start: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Bind an event listener to the dragstart event:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dragstart"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +</div> +<div id="event-stop" class="api-item"> +<h3>stop( event, ui )<span class="returns">Type: <code>dragstop</code></span> +</h3> +<div>Triggered when dragging stops.</div> +<ul> +<li> +<div><strong>event</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#Event";>Event</a> +</div> +<div></div> +</li> +<li> +<div><strong>ui</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#Object";>Object</a> +</div> +<div></div> +<ul> +<li> +<div><strong>helper</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#jQuery";>jQuery</a> +</div> +<div>The jQuery object representing the helper that's being dragged.</div> +</li> +<li> +<div><strong>position</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#Object";>Object</a> +</div> +<div>Current CSS position of the helper as <code>{ top, left }</code> object.</div> +</li> +<li> +<div><strong>offset</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#Object";>Object</a> +</div> +<div>Current offset position of the helper as <code>{ top, left }</code> object.</div> +</li> +</ul> +</li> +</ul> +<div> +<strong>Code examples:</strong><p>Initialize the draggable with the stop callback specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).draggable({</code></div></div><div class="container"><div class="line"><code> stop: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Bind an event listener to the dragstop event:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"dragstop"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +</div></section><section class="entry-examples" id="entry-examples"><header><h2>Example:</h2></header><div class="entry-example" id="example-0"> +<h4><span class="desc">A simple jQuery UI Draggable</span></h4> +<div class="syntaxhighlighter xml "> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + <div class="line n6">6</div> + + <div class="line n7">7</div> + + <div class="line n8">8</div> + + <div class="line n9">9</div> + + <div class="line n10">10</div> + + <div class="line n11">11</div> + + <div class="line n12">12</div> + + <div class="line n13">13</div> + + <div class="line n14">14</div> + + <div class="line n15">15</div> + + <div class="line n16">16</div> + + <div class="line n17">17</div> + + <div class="line n18">18</div> + + <div class="line n19">19</div> + + <div class="line n20">20</div> + + <div class="line n21">21</div> + + <div class="line n22">22</div> + + <div class="line n23">23</div> + + <div class="line n24">24</div> + + <div class="line n25">25</div> + + <div class="line n26">26</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="doctype"><!doctype html></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">html</span> <span class="attribute">lang</span>=<span class="value">"en"</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">meta</span> <span class="attribute">charset</span>=<span class="value">"utf-8"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">title</span>></span>draggable demo<span class="tag"></<span class="title">title</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">link</span> <span class="attribut e">rel</span>=<span class="value">"sty
<TRUNCATED> --------------------------------------------------------------------- To unsubscribe, e-mail: server-dev-unsubscr...@james.apache.org For additional commands, e-mail: server-dev-h...@james.apache.org
