[Summary view] [Print] [Text view]

   1  
   2  <ul class="UIAPIPlugin-toc">
   3  <li><a href="#overview">Overview</a></li>
   4  <li><a href="#options">Options</a></li>
   5  <li><a href="#events">Events</a></li>
   6  <li><a href="#methods">Methods</a></li>
   7  <li><a href="#theming">Theming</a></li>
   8  </ul>
   9  <div class="UIAPIPlugin">
  10    <h1>jQuery UI Draggable</h1>
  11    <div id="overview">
  12      <h2 class="top-header">Overview</h2>
  13      <div id="overview-main">
  14          <p>The jQuery UI Draggable plugin makes selected elements draggable by mouse.</p>
  15  <p>Draggable elements gets a class of <code>ui-draggable</code>. During drag the element also gets a class of <code>ui-draggable-dragging</code>. If you want not just drag, but drag-and-drop, see the jQuery UI Droppable plugin, which provides a drop target for draggables.</p>
  16  <p>All callbacks (start, stop, drag) receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):</p>
  17  <ul>
  18  <li><b>ui.helper</b> - the jQuery object representing the helper that's being dragged</li>
  19  <li><b>ui.position</b> - current position of the helper as { top, left } object, relative to the offset element</li>
  20  <li><b>ui.offset</b> - current absolute position of the helper as { top, left } object, relative to page</li>
  21  </ul>
  22      </div>
  23      <div id="overview-dependencies">
  24          <h3>Dependencies</h3>
  25          <ul>
  26  <li>UI Core</li>
  27  </ul>
  28      </div>
  29      <div id="overview-example">
  30          <h3>Example</h3>
  31          <div id="overview-example" class="example">
  32  <ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
  33  <p><div id="demo" class="tabs-container" rel="170">
  34  Initialize a draggable with default options.<br />
  35  </p>
  36  <pre>$(&quot;#draggable&quot;).draggable();
  37  </pre>
  38  <p></div><div id="source" class="tabs-container">
  39  </p>
  40  <pre>&lt;!DOCTYPE html&gt;
  41  &lt;html&gt;
  42  &lt;head&gt;
  43    &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  44    &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js&quot;&gt;&lt;/script&gt;
  45    &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  46    &lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;&gt;&lt;/script&gt;
  47  &lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  48    &lt;style type=&quot;text/css&quot;&gt;
  49      #draggable { width: 100px; height: 70px; background: silver; }
  50    &lt;/style&gt;
  51    &lt;script&gt;
  52    $(document).ready(function() {
  53      $(&quot;#draggable&quot;).draggable();
  54    });
  55    &lt;/script&gt;
  56  &lt;/head&gt;
  57  &lt;body style="font-size:62.5%;"&gt;
  58    
  59  &lt;div id=&quot;draggable&quot;&gt;Drag me&lt;/div&gt;
  60  
  61  &lt;/body&gt;
  62  &lt;/html&gt;
  63  </pre>
  64  <p></div>
  65  </p><p></div>
  66      </div>
  67    </div>
  68    <div id="options">
  69      <h2 class="top-header">Options</h2>
  70      <ul class="options-list">
  71        
  72  <li class="option" id="option-disabled">
  73    <div class="option-header">
  74      <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
  75      <dl>
  76        <dt class="option-type-label">Type:</dt>
  77          <dd class="option-type">Boolean</dd>
  78        
  79        <dt class="option-default-label">Default:</dt>
  80          <dd class="option-default">false</dd>
  81        
  82      </dl>
  83    </div>
  84    <div class="option-description">
  85      <p>Disables (true) or enables (false) the draggable. Can be set when initialising (first creating) the draggable.</p>
  86    </div>
  87    <div class="option-examples">
  88      <h4>Code examples</h4>
  89      <dl class="option-examples-list">
  90      
  91  <dt>
  92    Initialize a draggable with the <code>disabled</code> option specified.
  93  </dt>
  94  <dd>
  95  <pre><code>$( ".selector" ).draggable({ disabled: true });</code></pre>
  96  </dd>
  97  
  98      
  99  <dt>
 100    Get or set the <code>disabled</code> option, after init.
 101  </dt>
 102  <dd>
 103  <pre><code>//getter
 104  var disabled = $( ".selector" ).draggable( "option", "disabled" );
 105  //setter
 106  $( ".selector" ).draggable( "option", "disabled", true );</code></pre>
 107  </dd>
 108  
 109      </dl>
 110    </div>
 111  </li>
 112  
 113  
 114  <li class="option" id="option-addClasses">
 115    <div class="option-header">
 116      <h3 class="option-name"><a href="#option-addClasses">addClasses</a></h3>
 117      <dl>
 118        <dt class="option-type-label">Type:</dt>
 119          <dd class="option-type">Boolean</dd>
 120        
 121        <dt class="option-default-label">Default:</dt>
 122          <dd class="option-default">true</dd>
 123        
 124      </dl>
 125    </div>
 126    <div class="option-description">
 127      <p>If set to false, will prevent the <code>ui-draggable</code> class from being added. This may be desired as a performance optimization when calling <code>.draggable()</code> init on many hundreds of elements.</p>
 128    </div>
 129    <div class="option-examples">
 130      <h4>Code examples</h4>
 131      <dl class="option-examples-list">
 132      
 133  <dt>
 134    Initialize a draggable with the <code>addClasses</code> option specified.
 135  </dt>
 136  <dd>
 137  <pre><code>$( ".selector" ).draggable({ addClasses: false });</code></pre>
 138  </dd>
 139  
 140      
 141  <dt>
 142    Get or set the <code>addClasses</code> option, after init.
 143  </dt>
 144  <dd>
 145  <pre><code>//getter
 146  var addClasses = $( ".selector" ).draggable( "option", "addClasses" );
 147  //setter
 148  $( ".selector" ).draggable( "option", "addClasses", false );</code></pre>
 149  </dd>
 150  
 151      </dl>
 152    </div>
 153  </li>
 154  
 155  
 156  <li class="option" id="option-appendTo">
 157    <div class="option-header">
 158      <h3 class="option-name"><a href="#option-appendTo">appendTo</a></h3>
 159      <dl>
 160        <dt class="option-type-label">Type:</dt>
 161          <dd class="option-type">Element, Selector</dd>
 162        
 163        <dt class="option-default-label">Default:</dt>
 164          <dd class="option-default">'parent'</dd>
 165        
 166      </dl>
 167    </div>
 168    <div class="option-description">
 169      <p>The element passed to or selected by the <code>appendTo</code> option will be used as the draggable helper's container during dragging. By default, the helper is appended to the same container as the draggable.</p>
 170    </div>
 171    <div class="option-examples">
 172      <h4>Code examples</h4>
 173      <dl class="option-examples-list">
 174      
 175  <dt>
 176    Initialize a draggable with the <code>appendTo</code> option specified.
 177  </dt>
 178  <dd>
 179  <pre><code>$( ".selector" ).draggable({ appendTo: 'body' });</code></pre>
 180  </dd>
 181  
 182      
 183  <dt>
 184    Get or set the <code>appendTo</code> option, after init.
 185  </dt>
 186  <dd>
 187  <pre><code>//getter
 188  var appendTo = $( ".selector" ).draggable( "option", "appendTo" );
 189  //setter
 190  $( ".selector" ).draggable( "option", "appendTo", 'body' );</code></pre>
 191  </dd>
 192  
 193      </dl>
 194    </div>
 195  </li>
 196  
 197  
 198  <li class="option" id="option-axis">
 199    <div class="option-header">
 200      <h3 class="option-name"><a href="#option-axis">axis</a></h3>
 201      <dl>
 202        <dt class="option-type-label">Type:</dt>
 203          <dd class="option-type">String</dd>
 204        
 205        <dt class="option-default-label">Default:</dt>
 206          <dd class="option-default">false</dd>
 207        
 208      </dl>
 209    </div>
 210    <div class="option-description">
 211      <p>Constrains dragging to either the horizontal (x) or vertical (y) axis. Possible values: 'x', 'y'.</p>
 212    </div>
 213    <div class="option-examples">
 214      <h4>Code examples</h4>
 215      <dl class="option-examples-list">
 216      
 217  <dt>
 218    Initialize a draggable with the <code>axis</code> option specified.
 219  </dt>
 220  <dd>
 221  <pre><code>$( ".selector" ).draggable({ axis: 'x' });</code></pre>
 222  </dd>
 223  
 224      
 225  <dt>
 226    Get or set the <code>axis</code> option, after init.
 227  </dt>
 228  <dd>
 229  <pre><code>//getter
 230  var axis = $( ".selector" ).draggable( "option", "axis" );
 231  //setter
 232  $( ".selector" ).draggable( "option", "axis", 'x' );</code></pre>
 233  </dd>
 234  
 235      </dl>
 236    </div>
 237  </li>
 238  
 239  
 240  <li class="option" id="option-cancel">
 241    <div class="option-header">
 242      <h3 class="option-name"><a href="#option-cancel">cancel</a></h3>
 243      <dl>
 244        <dt class="option-type-label">Type:</dt>
 245          <dd class="option-type">Selector</dd>
 246        
 247        <dt class="option-default-label">Default:</dt>
 248          <dd class="option-default">':input,option'</dd>
 249        
 250      </dl>
 251    </div>
 252    <div class="option-description">
 253      <p>Prevents dragging from starting on specified elements.</p>
 254    </div>
 255    <div class="option-examples">
 256      <h4>Code examples</h4>
 257      <dl class="option-examples-list">
 258      
 259  <dt>
 260    Initialize a draggable with the <code>cancel</code> option specified.
 261  </dt>
 262  <dd>
 263  <pre><code>$( ".selector" ).draggable({ cancel: 'button' });</code></pre>
 264  </dd>
 265  
 266      
 267  <dt>
 268    Get or set the <code>cancel</code> option, after init.
 269  </dt>
 270  <dd>
 271  <pre><code>//getter
 272  var cancel = $( ".selector" ).draggable( "option", "cancel" );
 273  //setter
 274  $( ".selector" ).draggable( "option", "cancel", 'button' );</code></pre>
 275  </dd>
 276  
 277      </dl>
 278    </div>
 279  </li>
 280  
 281  
 282  <li class="option" id="option-connectToSortable">
 283    <div class="option-header">
 284      <h3 class="option-name"><a href="#option-connectToSortable">connectToSortable</a></h3>
 285      <dl>
 286        <dt class="option-type-label">Type:</dt>
 287          <dd class="option-type">Selector</dd>
 288        
 289        <dt class="option-default-label">Default:</dt>
 290          <dd class="option-default">false</dd>
 291        
 292      </dl>
 293    </div>
 294    <div class="option-description">
 295      <p>Allows the draggable to be dropped onto the specified sortables. If this option is used (<code>helper</code> must be set to 'clone' in order to work flawlessly), a draggable can be dropped onto a sortable list and then becomes part of it.
 296  </p><p>Note: Specifying this option as an array of selectors has been removed.</p>
 297    </div>
 298    <div class="option-examples">
 299      <h4>Code examples</h4>
 300      <dl class="option-examples-list">
 301      
 302  <dt>
 303    Initialize a draggable with the <code>connectToSortable</code> option specified.
 304  </dt>
 305  <dd>
 306  <pre><code>$( ".selector" ).draggable({ connectToSortable: 'ul#myList' });</code></pre>
 307  </dd>
 308  
 309      
 310  <dt>
 311    Get or set the <code>connectToSortable</code> option, after init.
 312  </dt>
 313  <dd>
 314  <pre><code>//getter
 315  var connectToSortable = $( ".selector" ).draggable( "option", "connectToSortable" );
 316  //setter
 317  $( ".selector" ).draggable( "option", "connectToSortable", 'ul#myList' );</code></pre>
 318  </dd>
 319  
 320      </dl>
 321    </div>
 322  </li>
 323  
 324  
 325  <li class="option" id="option-containment">
 326    <div class="option-header">
 327      <h3 class="option-name"><a href="#option-containment">containment</a></h3>
 328      <dl>
 329        <dt class="option-type-label">Type:</dt>
 330          <dd class="option-type">Selector, Element, String, Array</dd>
 331        
 332        <dt class="option-default-label">Default:</dt>
 333          <dd class="option-default">false</dd>
 334        
 335      </dl>
 336    </div>
 337    <div class="option-description">
 338      <p>Constrains dragging to within the bounds of the specified element or region. Possible string values: 'parent', 'document', 'window', [x1, y1, x2, y2].</p>
 339    </div>
 340    <div class="option-examples">
 341      <h4>Code examples</h4>
 342      <dl class="option-examples-list">
 343      
 344  <dt>
 345    Initialize a draggable with the <code>containment</code> option specified.
 346  </dt>
 347  <dd>
 348  <pre><code>$( ".selector" ).draggable({ containment: 'parent' });</code></pre>
 349  </dd>
 350  
 351      
 352  <dt>
 353    Get or set the <code>containment</code> option, after init.
 354  </dt>
 355  <dd>
 356  <pre><code>//getter
 357  var containment = $( ".selector" ).draggable( "option", "containment" );
 358  //setter
 359  $( ".selector" ).draggable( "option", "containment", 'parent' );</code></pre>
 360  </dd>
 361  
 362      </dl>
 363    </div>
 364  </li>
 365  
 366  
 367  <li class="option" id="option-cursor">
 368    <div class="option-header">
 369      <h3 class="option-name"><a href="#option-cursor">cursor</a></h3>
 370      <dl>
 371        <dt class="option-type-label">Type:</dt>
 372          <dd class="option-type">String</dd>
 373        
 374        <dt class="option-default-label">Default:</dt>
 375          <dd class="option-default">'auto'</dd>
 376        
 377      </dl>
 378    </div>
 379    <div class="option-description">
 380      <p>The css cursor during the drag operation.</p>
 381    </div>
 382    <div class="option-examples">
 383      <h4>Code examples</h4>
 384      <dl class="option-examples-list">
 385      
 386  <dt>
 387    Initialize a draggable with the <code>cursor</code> option specified.
 388  </dt>
 389  <dd>
 390  <pre><code>$( ".selector" ).draggable({ cursor: 'crosshair' });</code></pre>
 391  </dd>
 392  
 393      
 394  <dt>
 395    Get or set the <code>cursor</code> option, after init.
 396  </dt>
 397  <dd>
 398  <pre><code>//getter
 399  var cursor = $( ".selector" ).draggable( "option", "cursor" );
 400  //setter
 401  $( ".selector" ).draggable( "option", "cursor", 'crosshair' );</code></pre>
 402  </dd>
 403  
 404      </dl>
 405    </div>
 406  </li>
 407  
 408  
 409  <li class="option" id="option-cursorAt">
 410    <div class="option-header">
 411      <h3 class="option-name"><a href="#option-cursorAt">cursorAt</a></h3>
 412      <dl>
 413        <dt class="option-type-label">Type:</dt>
 414          <dd class="option-type">Object</dd>
 415        
 416        <dt class="option-default-label">Default:</dt>
 417          <dd class="option-default">false</dd>
 418        
 419      </dl>
 420    </div>
 421    <div class="option-description">
 422      <p>Moves the dragging helper so the cursor always appears to drag from the same position. Coordinates can be given as a hash using a combination of one or two keys: <code>{ top, left, right, bottom }</code>.</p>
 423    </div>
 424    <div class="option-examples">
 425      <h4>Code examples</h4>
 426      <dl class="option-examples-list">
 427      
 428  <dt>
 429    Initialize a draggable with the <code>cursorAt</code> option specified.
 430  </dt>
 431  <dd>
 432  <pre><code>$( ".selector" ).draggable({ cursorAt: { left: 5 } });</code></pre>
 433  </dd>
 434  
 435      
 436  <dt>
 437    Get or set the <code>cursorAt</code> option, after init.
 438  </dt>
 439  <dd>
 440  <pre><code>//getter
 441  var cursorAt = $( ".selector" ).draggable( "option", "cursorAt" );
 442  //setter
 443  $( ".selector" ).draggable( "option", "cursorAt", { left: 5 } );</code></pre>
 444  </dd>
 445  
 446      </dl>
 447    </div>
 448  </li>
 449  
 450  
 451  <li class="option" id="option-delay">
 452    <div class="option-header">
 453      <h3 class="option-name"><a href="#option-delay">delay</a></h3>
 454      <dl>
 455        <dt class="option-type-label">Type:</dt>
 456          <dd class="option-type">Integer</dd>
 457        
 458        <dt class="option-default-label">Default:</dt>
 459          <dd class="option-default">0</dd>
 460        
 461      </dl>
 462    </div>
 463    <div class="option-description">
 464      <p>Time in milliseconds after mousedown until dragging should start. This option can be used to prevent unwanted drags when clicking on an element.</p>
 465    </div>
 466    <div class="option-examples">
 467      <h4>Code examples</h4>
 468      <dl class="option-examples-list">
 469      
 470  <dt>
 471    Initialize a draggable with the <code>delay</code> option specified.
 472  </dt>
 473  <dd>
 474  <pre><code>$( ".selector" ).draggable({ delay: 500 });</code></pre>
 475  </dd>
 476  
 477      
 478  <dt>
 479    Get or set the <code>delay</code> option, after init.
 480  </dt>
 481  <dd>
 482  <pre><code>//getter
 483  var delay = $( ".selector" ).draggable( "option", "delay" );
 484  //setter
 485  $( ".selector" ).draggable( "option", "delay", 500 );</code></pre>
 486  </dd>
 487  
 488      </dl>
 489    </div>
 490  </li>
 491  
 492  
 493  <li class="option" id="option-distance">
 494    <div class="option-header">
 495      <h3 class="option-name"><a href="#option-distance">distance</a></h3>
 496      <dl>
 497        <dt class="option-type-label">Type:</dt>
 498          <dd class="option-type">Integer</dd>
 499        
 500        <dt class="option-default-label">Default:</dt>
 501          <dd class="option-default">1</dd>
 502        
 503      </dl>
 504    </div>
 505    <div class="option-description">
 506      <p>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.</p>
 507    </div>
 508    <div class="option-examples">
 509      <h4>Code examples</h4>
 510      <dl class="option-examples-list">
 511      
 512  <dt>
 513    Initialize a draggable with the <code>distance</code> option specified.
 514  </dt>
 515  <dd>
 516  <pre><code>$( ".selector" ).draggable({ distance: 30 });</code></pre>
 517  </dd>
 518  
 519      
 520  <dt>
 521    Get or set the <code>distance</code> option, after init.
 522  </dt>
 523  <dd>
 524  <pre><code>//getter
 525  var distance = $( ".selector" ).draggable( "option", "distance" );
 526  //setter
 527  $( ".selector" ).draggable( "option", "distance", 30 );</code></pre>
 528  </dd>
 529  
 530      </dl>
 531    </div>
 532  </li>
 533  
 534  
 535  <li class="option" id="option-grid">
 536    <div class="option-header">
 537      <h3 class="option-name"><a href="#option-grid">grid</a></h3>
 538      <dl>
 539        <dt class="option-type-label">Type:</dt>
 540          <dd class="option-type">Array</dd>
 541        
 542        <dt class="option-default-label">Default:</dt>
 543          <dd class="option-default">false</dd>
 544        
 545      </dl>
 546    </div>
 547    <div class="option-description">
 548      <p>Snaps the dragging helper to a grid, every x and y pixels. Array values: [x, y]</p>
 549    </div>
 550    <div class="option-examples">
 551      <h4>Code examples</h4>
 552      <dl class="option-examples-list">
 553      
 554  <dt>
 555    Initialize a draggable with the <code>grid</code> option specified.
 556  </dt>
 557  <dd>
 558  <pre><code>$( ".selector" ).draggable({ grid: [50, 20] });</code></pre>
 559  </dd>
 560  
 561      
 562  <dt>
 563    Get or set the <code>grid</code> option, after init.
 564  </dt>
 565  <dd>
 566  <pre><code>//getter
 567  var grid = $( ".selector" ).draggable( "option", "grid" );
 568  //setter
 569  $( ".selector" ).draggable( "option", "grid", [50, 20] );</code></pre>
 570  </dd>
 571  
 572      </dl>
 573    </div>
 574  </li>
 575  
 576  
 577  <li class="option" id="option-handle">
 578    <div class="option-header">
 579      <h3 class="option-name"><a href="#option-handle">handle</a></h3>
 580      <dl>
 581        <dt class="option-type-label">Type:</dt>
 582          <dd class="option-type">Element, Selector</dd>
 583        
 584        <dt class="option-default-label">Default:</dt>
 585          <dd class="option-default">false</dd>
 586        
 587      </dl>
 588    </div>
 589    <div class="option-description">
 590      <p>If specified, restricts drag start click to the specified element(s).</p>
 591    </div>
 592    <div class="option-examples">
 593      <h4>Code examples</h4>
 594      <dl class="option-examples-list">
 595      
 596  <dt>
 597    Initialize a draggable with the <code>handle</code> option specified.
 598  </dt>
 599  <dd>
 600  <pre><code>$( ".selector" ).draggable({ handle: 'h2' });</code></pre>
 601  </dd>
 602  
 603      
 604  <dt>
 605    Get or set the <code>handle</code> option, after init.
 606  </dt>
 607  <dd>
 608  <pre><code>//getter
 609  var handle = $( ".selector" ).draggable( "option", "handle" );
 610  //setter
 611  $( ".selector" ).draggable( "option", "handle", 'h2' );</code></pre>
 612  </dd>
 613  
 614      </dl>
 615    </div>
 616  </li>
 617  
 618  
 619  <li class="option" id="option-helper">
 620    <div class="option-header">
 621      <h3 class="option-name"><a href="#option-helper">helper</a></h3>
 622      <dl>
 623        <dt class="option-type-label">Type:</dt>
 624          <dd class="option-type">String, Function</dd>
 625        
 626        <dt class="option-default-label">Default:</dt>
 627          <dd class="option-default">'original'</dd>
 628        
 629      </dl>
 630    </div>
 631    <div class="option-description">
 632      <p>Allows for a helper element to be used for dragging display. Possible values: 'original', 'clone', Function. If a function is specified, it must return a DOMElement.</p>
 633    </div>
 634    <div class="option-examples">
 635      <h4>Code examples</h4>
 636      <dl class="option-examples-list">
 637      
 638  <dt>
 639    Initialize a draggable with the <code>helper</code> option specified.
 640  </dt>
 641  <dd>
 642  <pre><code>$( ".selector" ).draggable({ helper: 'clone' });</code></pre>
 643  </dd>
 644  
 645      
 646  <dt>
 647    Get or set the <code>helper</code> option, after init.
 648  </dt>
 649  <dd>
 650  <pre><code>//getter
 651  var helper = $( ".selector" ).draggable( "option", "helper" );
 652  //setter
 653  $( ".selector" ).draggable( "option", "helper", 'clone' );</code></pre>
 654  </dd>
 655  
 656      </dl>
 657    </div>
 658  </li>
 659  
 660  
 661  <li class="option" id="option-iframeFix">
 662    <div class="option-header">
 663      <h3 class="option-name"><a href="#option-iframeFix">iframeFix</a></h3>
 664      <dl>
 665        <dt class="option-type-label">Type:</dt>
 666          <dd class="option-type">Boolean, Selector</dd>
 667        
 668        <dt class="option-default-label">Default:</dt>
 669          <dd class="option-default">false</dd>
 670        
 671      </dl>
 672    </div>
 673    <div class="option-description">
 674      <p>Prevent iframes from capturing the mousemove events during a drag. Useful in combination with cursorAt, or in any case, if the mouse cursor is not over the helper. If set to true, transparent overlays will be placed over all iframes on the page. If a selector is supplied, the matched iframes will have an overlay placed over them.</p>
 675    </div>
 676    <div class="option-examples">
 677      <h4>Code examples</h4>
 678      <dl class="option-examples-list">
 679      
 680  <dt>
 681    Initialize a draggable with the <code>iframeFix</code> option specified.
 682  </dt>
 683  <dd>
 684  <pre><code>$( ".selector" ).draggable({ iframeFix: true });</code></pre>
 685  </dd>
 686  
 687      
 688  <dt>
 689    Get or set the <code>iframeFix</code> option, after init.
 690  </dt>
 691  <dd>
 692  <pre><code>//getter
 693  var iframeFix = $( ".selector" ).draggable( "option", "iframeFix" );
 694  //setter
 695  $( ".selector" ).draggable( "option", "iframeFix", true );</code></pre>
 696  </dd>
 697  
 698      </dl>
 699    </div>
 700  </li>
 701  
 702  
 703  <li class="option" id="option-opacity">
 704    <div class="option-header">
 705      <h3 class="option-name"><a href="#option-opacity">opacity</a></h3>
 706      <dl>
 707        <dt class="option-type-label">Type:</dt>
 708          <dd class="option-type">Float</dd>
 709        
 710        <dt class="option-default-label">Default:</dt>
 711          <dd class="option-default">false</dd>
 712        
 713      </dl>
 714    </div>
 715    <div class="option-description">
 716      <p>Opacity for the helper while being dragged.</p>
 717    </div>
 718    <div class="option-examples">
 719      <h4>Code examples</h4>
 720      <dl class="option-examples-list">
 721      
 722  <dt>
 723    Initialize a draggable with the <code>opacity</code> option specified.
 724  </dt>
 725  <dd>
 726  <pre><code>$( ".selector" ).draggable({ opacity: 0.35 });</code></pre>
 727  </dd>
 728  
 729      
 730  <dt>
 731    Get or set the <code>opacity</code> option, after init.
 732  </dt>
 733  <dd>
 734  <pre><code>//getter
 735  var opacity = $( ".selector" ).draggable( "option", "opacity" );
 736  //setter
 737  $( ".selector" ).draggable( "option", "opacity", 0.35 );</code></pre>
 738  </dd>
 739  
 740      </dl>
 741    </div>
 742  </li>
 743  
 744  
 745  <li class="option" id="option-refreshPositions">
 746    <div class="option-header">
 747      <h3 class="option-name"><a href="#option-refreshPositions">refreshPositions</a></h3>
 748      <dl>
 749        <dt class="option-type-label">Type:</dt>
 750          <dd class="option-type">Boolean</dd>
 751        
 752        <dt class="option-default-label">Default:</dt>
 753          <dd class="option-default">false</dd>
 754        
 755      </dl>
 756    </div>
 757    <div class="option-description">
 758      <p>If set to true, all droppable positions are calculated on every mousemove. Caution: This solves issues on highly dynamic pages, but dramatically decreases performance.</p>
 759    </div>
 760    <div class="option-examples">
 761      <h4>Code examples</h4>
 762      <dl class="option-examples-list">
 763      
 764  <dt>
 765    Initialize a draggable with the <code>refreshPositions</code> option specified.
 766  </dt>
 767  <dd>
 768  <pre><code>$( ".selector" ).draggable({ refreshPositions: true });</code></pre>
 769  </dd>
 770  
 771      
 772  <dt>
 773    Get or set the <code>refreshPositions</code> option, after init.
 774  </dt>
 775  <dd>
 776  <pre><code>//getter
 777  var refreshPositions = $( ".selector" ).draggable( "option", "refreshPositions" );
 778  //setter
 779  $( ".selector" ).draggable( "option", "refreshPositions", true );</code></pre>
 780  </dd>
 781  
 782      </dl>
 783    </div>
 784  </li>
 785  
 786  
 787  <li class="option" id="option-revert">
 788    <div class="option-header">
 789      <h3 class="option-name"><a href="#option-revert">revert</a></h3>
 790      <dl>
 791        <dt class="option-type-label">Type:</dt>
 792          <dd class="option-type">Boolean, String</dd>
 793        
 794        <dt class="option-default-label">Default:</dt>
 795          <dd class="option-default">false</dd>
 796        
 797      </dl>
 798    </div>
 799    <div class="option-description">
 800      <p>If set to true, the element will return to its start position when dragging stops. Possible string values: 'valid', 'invalid'. If set to invalid, revert will only occur if the draggable has not been dropped on a droppable. For valid, it's the other way around.</p>
 801    </div>
 802    <div class="option-examples">
 803      <h4>Code examples</h4>
 804      <dl class="option-examples-list">
 805      
 806  <dt>
 807    Initialize a draggable with the <code>revert</code> option specified.
 808  </dt>
 809  <dd>
 810  <pre><code>$( ".selector" ).draggable({ revert: true });</code></pre>
 811  </dd>
 812  
 813      
 814  <dt>
 815    Get or set the <code>revert</code> option, after init.
 816  </dt>
 817  <dd>
 818  <pre><code>//getter
 819  var revert = $( ".selector" ).draggable( "option", "revert" );
 820  //setter
 821  $( ".selector" ).draggable( "option", "revert", true );</code></pre>
 822  </dd>
 823  
 824      </dl>
 825    </div>
 826  </li>
 827  
 828  
 829  <li class="option" id="option-revertDuration">
 830    <div class="option-header">
 831      <h3 class="option-name"><a href="#option-revertDuration">revertDuration</a></h3>
 832      <dl>
 833        <dt class="option-type-label">Type:</dt>
 834          <dd class="option-type">Integer</dd>
 835        
 836        <dt class="option-default-label">Default:</dt>
 837          <dd class="option-default">500</dd>
 838        
 839      </dl>
 840    </div>
 841    <div class="option-description">
 842      <p>The duration of the revert animation, in milliseconds. Ignored if revert is false.</p>
 843    </div>
 844    <div class="option-examples">
 845      <h4>Code examples</h4>
 846      <dl class="option-examples-list">
 847      
 848  <dt>
 849    Initialize a draggable with the <code>revertDuration</code> option specified.
 850  </dt>
 851  <dd>
 852  <pre><code>$( ".selector" ).draggable({ revertDuration: 1000 });</code></pre>
 853  </dd>
 854  
 855      
 856  <dt>
 857    Get or set the <code>revertDuration</code> option, after init.
 858  </dt>
 859  <dd>
 860  <pre><code>//getter
 861  var revertDuration = $( ".selector" ).draggable( "option", "revertDuration" );
 862  //setter
 863  $( ".selector" ).draggable( "option", "revertDuration", 1000 );</code></pre>
 864  </dd>
 865  
 866      </dl>
 867    </div>
 868  </li>
 869  
 870  
 871  <li class="option" id="option-scope">
 872    <div class="option-header">
 873      <h3 class="option-name"><a href="#option-scope">scope</a></h3>
 874      <dl>
 875        <dt class="option-type-label">Type:</dt>
 876          <dd class="option-type">String</dd>
 877        
 878        <dt class="option-default-label">Default:</dt>
 879          <dd class="option-default">'default'</dd>
 880        
 881      </dl>
 882    </div>
 883    <div class="option-description">
 884      <p>Used to group sets of draggable and droppable items, in addition to droppable's accept option. A draggable with the same scope value as a droppable will be accepted by the droppable.</p>
 885    </div>
 886    <div class="option-examples">
 887      <h4>Code examples</h4>
 888      <dl class="option-examples-list">
 889      
 890  <dt>
 891    Initialize a draggable with the <code>scope</code> option specified.
 892  </dt>
 893  <dd>
 894  <pre><code>$( ".selector" ).draggable({ scope: 'tasks' });</code></pre>
 895  </dd>
 896  
 897      
 898  <dt>
 899    Get or set the <code>scope</code> option, after init.
 900  </dt>
 901  <dd>
 902  <pre><code>//getter
 903  var scope = $( ".selector" ).draggable( "option", "scope" );
 904  //setter
 905  $( ".selector" ).draggable( "option", "scope", 'tasks' );</code></pre>
 906  </dd>
 907  
 908      </dl>
 909    </div>
 910  </li>
 911  
 912  
 913  <li class="option" id="option-scroll">
 914    <div class="option-header">
 915      <h3 class="option-name"><a href="#option-scroll">scroll</a></h3>
 916      <dl>
 917        <dt class="option-type-label">Type:</dt>
 918          <dd class="option-type">Boolean</dd>
 919        
 920        <dt class="option-default-label">Default:</dt>
 921          <dd class="option-default">true</dd>
 922        
 923      </dl>
 924    </div>
 925    <div class="option-description">
 926      <p>If set to true, container auto-scrolls while dragging.</p>
 927    </div>
 928    <div class="option-examples">
 929      <h4>Code examples</h4>
 930      <dl class="option-examples-list">
 931      
 932  <dt>
 933    Initialize a draggable with the <code>scroll</code> option specified.
 934  </dt>
 935  <dd>
 936  <pre><code>$( ".selector" ).draggable({ scroll: false });</code></pre>
 937  </dd>
 938  
 939      
 940  <dt>
 941    Get or set the <code>scroll</code> option, after init.
 942  </dt>
 943  <dd>
 944  <pre><code>//getter
 945  var scroll = $( ".selector" ).draggable( "option", "scroll" );
 946  //setter
 947  $( ".selector" ).draggable( "option", "scroll", false );</code></pre>
 948  </dd>
 949  
 950      </dl>
 951    </div>
 952  </li>
 953  
 954  
 955  <li class="option" id="option-scrollSensitivity">
 956    <div class="option-header">
 957      <h3 class="option-name"><a href="#option-scrollSensitivity">scrollSensitivity</a></h3>
 958      <dl>
 959        <dt class="option-type-label">Type:</dt>
 960          <dd class="option-type">Integer</dd>
 961        
 962        <dt class="option-default-label">Default:</dt>
 963          <dd class="option-default">20</dd>
 964        
 965      </dl>
 966    </div>
 967    <div class="option-description">
 968      <p>Distance in pixels from the edge of the viewport after which the viewport should scroll. Distance is relative to pointer, not the draggable.</p>
 969    </div>
 970    <div class="option-examples">
 971      <h4>Code examples</h4>
 972      <dl class="option-examples-list">
 973      
 974  <dt>
 975    Initialize a draggable with the <code>scrollSensitivity</code> option specified.
 976  </dt>
 977  <dd>
 978  <pre><code>$( ".selector" ).draggable({ scrollSensitivity: 40 });</code></pre>
 979  </dd>
 980  
 981      
 982  <dt>
 983    Get or set the <code>scrollSensitivity</code> option, after init.
 984  </dt>
 985  <dd>
 986  <pre><code>//getter
 987  var scrollSensitivity = $( ".selector" ).draggable( "option", "scrollSensitivity" );
 988  //setter
 989  $( ".selector" ).draggable( "option", "scrollSensitivity", 40 );</code></pre>
 990  </dd>
 991  
 992      </dl>
 993    </div>
 994  </li>
 995  
 996  
 997  <li class="option" id="option-scrollSpeed">
 998    <div class="option-header">
 999      <h3 class="option-name"><a href="#option-scrollSpeed">scrollSpeed</a></h3>
1000      <dl>
1001        <dt class="option-type-label">Type:</dt>
1002          <dd class="option-type">Integer</dd>
1003        
1004        <dt class="option-default-label">Default:</dt>
1005          <dd class="option-default">20</dd>
1006        
1007      </dl>
1008    </div>
1009    <div class="option-description">
1010      <p>The speed at which the window should scroll once the mouse pointer gets within the <code>scrollSensitivity</code> distance.</p>
1011    </div>
1012    <div class="option-examples">
1013      <h4>Code examples</h4>
1014      <dl class="option-examples-list">
1015      
1016  <dt>
1017    Initialize a draggable with the <code>scrollSpeed</code> option specified.
1018  </dt>
1019  <dd>
1020  <pre><code>$( ".selector" ).draggable({ scrollSpeed: 40 });</code></pre>
1021  </dd>
1022  
1023      
1024  <dt>
1025    Get or set the <code>scrollSpeed</code> option, after init.
1026  </dt>
1027  <dd>
1028  <pre><code>//getter
1029  var scrollSpeed = $( ".selector" ).draggable( "option", "scrollSpeed" );
1030  //setter
1031  $( ".selector" ).draggable( "option", "scrollSpeed", 40 );</code></pre>
1032  </dd>
1033  
1034      </dl>
1035    </div>
1036  </li>
1037  
1038  
1039  <li class="option" id="option-snap">
1040    <div class="option-header">
1041      <h3 class="option-name"><a href="#option-snap">snap</a></h3>
1042      <dl>
1043        <dt class="option-type-label">Type:</dt>
1044          <dd class="option-type">Boolean, Selector</dd>
1045        
1046        <dt class="option-default-label">Default:</dt>
1047          <dd class="option-default">false</dd>
1048        
1049      </dl>
1050    </div>
1051    <div class="option-description">
1052      <p>If set to a selector or to true (equivalent to '.ui-draggable'), the draggable will snap to the edges of the selected elements when near an edge of the element.</p>
1053    </div>
1054    <div class="option-examples">
1055      <h4>Code examples</h4>
1056      <dl class="option-examples-list">
1057      
1058  <dt>
1059    Initialize a draggable with the <code>snap</code> option specified.
1060  </dt>
1061  <dd>
1062  <pre><code>$( ".selector" ).draggable({ snap: true });</code></pre>
1063  </dd>
1064  
1065      
1066  <dt>
1067    Get or set the <code>snap</code> option, after init.
1068  </dt>
1069  <dd>
1070  <pre><code>//getter
1071  var snap = $( ".selector" ).draggable( "option", "snap" );
1072  //setter
1073  $( ".selector" ).draggable( "option", "snap", true );</code></pre>
1074  </dd>
1075  
1076      </dl>
1077    </div>
1078  </li>
1079  
1080  
1081  <li class="option" id="option-snapMode">
1082    <div class="option-header">
1083      <h3 class="option-name"><a href="#option-snapMode">snapMode</a></h3>
1084      <dl>
1085        <dt class="option-type-label">Type:</dt>
1086          <dd class="option-type">String</dd>
1087        
1088        <dt class="option-default-label">Default:</dt>
1089          <dd class="option-default">'both'</dd>
1090        
1091      </dl>
1092    </div>
1093    <div class="option-description">
1094      <p>Determines which edges of snap elements the draggable will snap to. Ignored if snap is false. Possible values: 'inner', 'outer', 'both'</p>
1095    </div>
1096    <div class="option-examples">
1097      <h4>Code examples</h4>
1098      <dl class="option-examples-list">
1099      
1100  <dt>
1101    Initialize a draggable with the <code>snapMode</code> option specified.
1102  </dt>
1103  <dd>
1104  <pre><code>$( ".selector" ).draggable({ snapMode: 'outer' });</code></pre>
1105  </dd>
1106  
1107      
1108  <dt>
1109    Get or set the <code>snapMode</code> option, after init.
1110  </dt>
1111  <dd>
1112  <pre><code>//getter
1113  var snapMode = $( ".selector" ).draggable( "option", "snapMode" );
1114  //setter
1115  $( ".selector" ).draggable( "option", "snapMode", 'outer' );</code></pre>
1116  </dd>
1117  
1118      </dl>
1119    </div>
1120  </li>
1121  
1122  
1123  <li class="option" id="option-snapTolerance">
1124    <div class="option-header">
1125      <h3 class="option-name"><a href="#option-snapTolerance">snapTolerance</a></h3>
1126      <dl>
1127        <dt class="option-type-label">Type:</dt>
1128          <dd class="option-type">Integer</dd>
1129        
1130        <dt class="option-default-label">Default:</dt>
1131          <dd class="option-default">20</dd>
1132        
1133      </dl>
1134    </div>
1135    <div class="option-description">
1136      <p>The distance in pixels from the snap element edges at which snapping should occur. Ignored if snap is false.</p>
1137    </div>
1138    <div class="option-examples">
1139      <h4>Code examples</h4>
1140      <dl class="option-examples-list">
1141      
1142  <dt>
1143    Initialize a draggable with the <code>snapTolerance</code> option specified.
1144  </dt>
1145  <dd>
1146  <pre><code>$( ".selector" ).draggable({ snapTolerance: 40 });</code></pre>
1147  </dd>
1148  
1149      
1150  <dt>
1151    Get or set the <code>snapTolerance</code> option, after init.
1152  </dt>
1153  <dd>
1154  <pre><code>//getter
1155  var snapTolerance = $( ".selector" ).draggable( "option", "snapTolerance" );
1156  //setter
1157  $( ".selector" ).draggable( "option", "snapTolerance", 40 );</code></pre>
1158  </dd>
1159  
1160      </dl>
1161    </div>
1162  </li>
1163  
1164  
1165  <li class="option" id="option-stack">
1166    <div class="option-header">
1167      <h3 class="option-name"><a href="#option-stack">stack</a></h3>
1168      <dl>
1169        <dt class="option-type-label">Type:</dt>
1170          <dd class="option-type">Object</dd>
1171        
1172        <dt class="option-default-label">Default:</dt>
1173          <dd class="option-default">false</dd>
1174        
1175      </dl>
1176    </div>
1177    <div class="option-description">
1178      <p>Controls the z-Index of the defined group (key 'group' in the hash, accepts jQuery selector) automatically, always brings to front the dragged item. Very useful in things like window managers. Optionally, a 'min' key can be set, so the zIndex cannot go below that value.</p>
1179    </div>
1180    <div class="option-examples">
1181      <h4>Code examples</h4>
1182      <dl class="option-examples-list">
1183      
1184  <dt>
1185    Initialize a draggable with the <code>stack</code> option specified.
1186  </dt>
1187  <dd>
1188  <pre><code>$( ".selector" ).draggable({ stack: { group: 'products', min: 50 } });</code></pre>
1189  </dd>
1190  
1191      
1192  <dt>
1193    Get or set the <code>stack</code> option, after init.
1194  </dt>
1195  <dd>
1196  <pre><code>//getter
1197  var stack = $( ".selector" ).draggable( "option", "stack" );
1198  //setter
1199  $( ".selector" ).draggable( "option", "stack", { group: 'products', min: 50 } );</code></pre>
1200  </dd>
1201  
1202      </dl>
1203    </div>
1204  </li>
1205  
1206  
1207  <li class="option" id="option-zIndex">
1208    <div class="option-header">
1209      <h3 class="option-name"><a href="#option-zIndex">zIndex</a></h3>
1210      <dl>
1211        <dt class="option-type-label">Type:</dt>
1212          <dd class="option-type">Integer</dd>
1213        
1214        <dt class="option-default-label">Default:</dt>
1215          <dd class="option-default">false</dd>
1216        
1217      </dl>
1218    </div>
1219    <div class="option-description">
1220      <p>z-index for the helper while being dragged.</p>
1221    </div>
1222    <div class="option-examples">
1223      <h4>Code examples</h4>
1224      <dl class="option-examples-list">
1225      
1226  <dt>
1227    Initialize a draggable with the <code>zIndex</code> option specified.
1228  </dt>
1229  <dd>
1230  <pre><code>$( ".selector" ).draggable({ zIndex: 2700 });</code></pre>
1231  </dd>
1232  
1233      
1234  <dt>
1235    Get or set the <code>zIndex</code> option, after init.
1236  </dt>
1237  <dd>
1238  <pre><code>//getter
1239  var zIndex = $( ".selector" ).draggable( "option", "zIndex" );
1240  //setter
1241  $( ".selector" ).draggable( "option", "zIndex", 2700 );</code></pre>
1242  </dd>
1243  
1244      </dl>
1245    </div>
1246  </li>
1247  
1248      </ul>
1249    </div>
1250    <div id="events">
1251      <h2 class="top-header">Events</h2>
1252      <ul class="events-list">
1253        
1254  <li class="event" id="event-start">
1255    <div class="event-header">
1256      <h3 class="event-name"><a href="#event-start">start</a></h3>
1257      <dl>
1258        <dt class="event-type-label">Type:</dt>
1259          <dd class="event-type">dragstart</dd>
1260      </dl>
1261    </div>
1262    <div class="event-description">
1263      <p>This event is triggered when dragging starts.</p>
1264    </div>
1265    <div class="event-examples">
1266      <h4>Code examples</h4>
1267      <dl class="event-examples-list">
1268      
1269  <dt>
1270    Supply a callback function to handle the <code>start</code> event as an init option.
1271  </dt>
1272  <dd>
1273  <pre><code>$( &quot;.selector&quot; ).draggable({
1274     start: function(event, ui) { ... }
1275  });</code></pre>
1276  </dd>
1277  
1278      
1279  <dt>
1280    Bind to the <code>start</code> event by type: <code>dragstart</code>.
1281  </dt>
1282  <dd>
1283  <pre><code>$( &quot;.selector&quot; ).bind( &quot;dragstart&quot;, function(event, ui) {
1284    ...
1285  });</code></pre>
1286  </dd>
1287  
1288      </dl>
1289    </div>
1290  </li>
1291  
1292  
1293  <li class="event" id="event-drag">
1294    <div class="event-header">
1295      <h3 class="event-name"><a href="#event-drag">drag</a></h3>
1296      <dl>
1297        <dt class="event-type-label">Type:</dt>
1298          <dd class="event-type">drag</dd>
1299      </dl>
1300    </div>
1301    <div class="event-description">
1302      <p>This event is triggered when the mouse is moved during the dragging.</p>
1303    </div>
1304    <div class="event-examples">
1305      <h4>Code examples</h4>
1306      <dl class="event-examples-list">
1307      
1308  <dt>
1309    Supply a callback function to handle the <code>drag</code> event as an init option.
1310  </dt>
1311  <dd>
1312  <pre><code>$( &quot;.selector&quot; ).draggable({
1313     drag: function(event, ui) { ... }
1314  });</code></pre>
1315  </dd>
1316  
1317      
1318  <dt>
1319    Bind to the <code>drag</code> event by type: <code>drag</code>.
1320  </dt>
1321  <dd>
1322  <pre><code>$( &quot;.selector&quot; ).bind( &quot;drag&quot;, function(event, ui) {
1323    ...
1324  });</code></pre>
1325  </dd>
1326  
1327      </dl>
1328    </div>
1329  </li>
1330  
1331  
1332  <li class="event" id="event-stop">
1333    <div class="event-header">
1334      <h3 class="event-name"><a href="#event-stop">stop</a></h3>
1335      <dl>
1336        <dt class="event-type-label">Type:</dt>
1337          <dd class="event-type">dragstop</dd>
1338      </dl>
1339    </div>
1340    <div class="event-description">
1341      <p>This event is triggered when dragging stops.</p>
1342    </div>
1343    <div class="event-examples">
1344      <h4>Code examples</h4>
1345      <dl class="event-examples-list">
1346      
1347  <dt>
1348    Supply a callback function to handle the <code>stop</code> event as an init option.
1349  </dt>
1350  <dd>
1351  <pre><code>$( &quot;.selector&quot; ).draggable({
1352     stop: function(event, ui) { ... }
1353  });</code></pre>
1354  </dd>
1355  
1356      
1357  <dt>
1358    Bind to the <code>stop</code> event by type: <code>dragstop</code>.
1359  </dt>
1360  <dd>
1361  <pre><code>$( &quot;.selector&quot; ).bind( &quot;dragstop&quot;, function(event, ui) {
1362    ...
1363  });</code></pre>
1364  </dd>
1365  
1366      </dl>
1367    </div>
1368  </li>
1369  
1370      </ul>
1371    </div>
1372    <div id="methods">
1373      <h2 class="top-header">Methods</h2>
1374      <ul class="methods-list">
1375        
1376  <li class="method" id="method-destroy">
1377    <div class="method-header">
1378      <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
1379      <dl>
1380        <dt class="method-signature-label">Signature:</dt>
1381          <dd class="method-signature">.draggable( "destroy"
1382  
1383  
1384  
1385  
1386  
1387  
1388  
1389  )</dd>
1390      </dl>
1391    </div>
1392    <div class="method-description">
1393      <p>Remove the draggable functionality completely. This will return the element back to its pre-init state.</p>
1394    </div>
1395  </li>
1396  
1397  
1398  <li class="method" id="method-disable">
1399    <div class="method-header">
1400      <h3 class="method-name"><a href="#method-disable">disable</a></h3>
1401      <dl>
1402        <dt class="method-signature-label">Signature:</dt>
1403          <dd class="method-signature">.draggable( "disable"
1404  
1405  
1406  
1407  
1408  
1409  
1410  
1411  )</dd>
1412      </dl>
1413    </div>
1414    <div class="method-description">
1415      <p>Disable the draggable.</p>
1416    </div>
1417  </li>
1418  
1419  
1420  <li class="method" id="method-enable">
1421    <div class="method-header">
1422      <h3 class="method-name"><a href="#method-enable">enable</a></h3>
1423      <dl>
1424        <dt class="method-signature-label">Signature:</dt>
1425          <dd class="method-signature">.draggable( "enable"
1426  
1427  
1428  
1429  
1430  
1431  
1432  
1433  )</dd>
1434      </dl>
1435    </div>
1436    <div class="method-description">
1437      <p>Enable the draggable.</p>
1438    </div>
1439  </li>
1440  
1441  
1442  <li class="method" id="method-option">
1443    <div class="method-header">
1444      <h3 class="method-name"><a href="#method-option">option</a></h3>
1445      <dl>
1446        <dt class="method-signature-label">Signature:</dt>
1447          <dd class="method-signature">.draggable( "option"
1448  
1449  , optionName
1450  
1451  , <span class="optional">[</span>value<span class="optional">] </span>
1452  
1453  
1454  
1455  )</dd>
1456      </dl>
1457    </div>
1458    <div class="method-description">
1459      <p>Get or set any draggable option. If no value is specified, will act as a getter.</p>
1460    </div>
1461  </li>
1462  
1463  
1464  <li class="method" id="method-option">
1465    <div class="method-header">
1466      <h3 class="method-name"><a href="#method-option">option</a></h3>
1467      <dl>
1468        <dt class="method-signature-label">Signature:</dt>
1469          <dd class="method-signature">.draggable( "option"
1470  
1471  , options
1472  
1473  
1474  
1475  
1476  
1477  )</dd>
1478      </dl>
1479    </div>
1480    <div class="method-description">
1481      <p>Set multiple draggable options at once by providing an options object.</p>
1482    </div>
1483  </li>
1484  
1485  
1486  <li class="method" id="method-widget">
1487    <div class="method-header">
1488      <h3 class="method-name"><a href="#method-widget">widget</a></h3>
1489      <dl>
1490        <dt class="method-signature-label">Signature:</dt>
1491          <dd class="method-signature">.draggable( "widget"
1492  
1493  
1494  
1495  
1496  
1497  
1498  
1499  )</dd>
1500      </dl>
1501    </div>
1502    <div class="method-description">
1503      <p>Returns the .ui-draggable element.</p>
1504    </div>
1505  </li>
1506  
1507  
1508      </ul>
1509    </div>
1510    <div id="theming">
1511      <h2 class="top-header">Theming</h2>
1512      <p>The jQuery UI Draggable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
1513  </p>
1514    <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.draggable.css stylesheet that can be modified. These classes are highlighed in bold below.
1515  </p>
1516      
1517    <h3>Sample markup with jQuery UI CSS Framework classes</h3>
1518    &lt;div class=&quot;<strong>ui-draggable</strong>&quot;&gt;&lt;/div&gt;
1519    <p class="theme-note">
1520      <strong>
1521        Note: This is a sample of markup generated by the draggable plugin, not markup you should use to create a draggable. The only markup needed for that is &lt;div&gt;&lt;/div&gt;.
1522      </strong>
1523    </p>
1524  
1525    </div>
1526  </div>
1527  
1528  </p><!-- 
1529  Pre-expand include size: 59800 bytes
1530  Post-expand include size: 103250 bytes
1531  Template argument size: 57509 bytes
1532  Maximum: 2097152 bytes
1533  -->
1534  
1535  <!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3340-1!1!0!!en!2 and timestamp 20100421062535 -->