[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 Droppable</h1>
  11    <div id="overview">
  12      <h2 class="top-header">Overview</h2>
  13      <div id="overview-main">
  14          <p>The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which (individually) or which kind of draggables each will accept.</p>
  15  <p>All callbacks 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>
  16  <ul>
  17   <li> <b>ui.draggable</b> - current draggable element, a jQuery object.</li>
  18   <li> <b>ui.helper</b> - current draggable helper, a jQuery object</li>
  19   <li> <b>ui.position</b> - current position of the draggable helper { top: , left: }</li>
  20   <li> <b>ui.offset</b> - current absolute position of the draggable helper { top: , left: }</li>
  21  </ul>
  22      </div>
  23      <div id="overview-dependencies">
  24          <h3>Dependencies</h3>
  25          <ul>
  26  <li>UI Core</li>
  27  <li><a href="http://docs.jquery.com/UI/Draggable" title="UI/Draggable">UI Draggable</a></li>
  28  </ul>
  29      </div>
  30      <div id="overview-example">
  31          <h3>Example</h3>
  32          <div id="overview-example" class="example">
  33  <ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
  34  <p><div id="demo" class="tabs-container" rel="100">
  35  Makes the div droppable (a drop target for a draggable).<br />
  36  </p>
  37  <pre>$(&quot;#draggable&quot;).draggable();
  38      $(&quot;#droppable&quot;).droppable({
  39        drop: function() { alert('dropped'); }
  40      });
  41  </pre>
  42  <p></div><div id="source" class="tabs-container">
  43  </p>
  44  <pre>&lt;!DOCTYPE html&gt;
  45  &lt;html&gt;
  46  &lt;head&gt;
  47    &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;
  48    &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js&quot;&gt;&lt;/script&gt;
  49    &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  50    &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;
  51  &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;
  52    &lt;style type=&quot;text/css&quot;&gt;
  53      #draggable { width: 75px; height: 25px; background: silver; padding: 10px; }
  54      #droppable { position: absolute; left: 250px; top: 0; width: 125px; height: 75px; background: gray; color: white; padding: 10px; }
  55    &lt;/style&gt;
  56    &lt;script&gt;
  57    $(document).ready(function() {
  58      $(&quot;#draggable&quot;).draggable();
  59      $(&quot;#droppable&quot;).droppable({
  60        drop: function() { alert('dropped'); }
  61      });
  62    });
  63    &lt;/script&gt;
  64  &lt;/head&gt;
  65  &lt;body style="font-size:62.5%;"&gt;
  66    
  67  &lt;div id=&quot;droppable&quot;&gt;Drop here&lt;/div&gt;
  68  &lt;div id=&quot;draggable&quot;&gt;Drag me&lt;/div&gt;
  69  
  70  &lt;/body&gt;
  71  &lt;/html&gt;
  72  </pre>
  73  <p></div>
  74  </p><p></div>
  75      </div>
  76    </div>
  77    <div id="options">
  78      <h2 class="top-header">Options</h2>
  79      <ul class="options-list">
  80        
  81  <li class="option" id="option-disabled">
  82    <div class="option-header">
  83      <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
  84      <dl>
  85        <dt class="option-type-label">Type:</dt>
  86          <dd class="option-type">Boolean</dd>
  87        
  88        <dt class="option-default-label">Default:</dt>
  89          <dd class="option-default">false</dd>
  90        
  91      </dl>
  92    </div>
  93    <div class="option-description">
  94      <p>Disables (true) or enables (false) the droppable. Can be set when initialising (first creating) the droppable.</p>
  95    </div>
  96    <div class="option-examples">
  97      <h4>Code examples</h4>
  98      <dl class="option-examples-list">
  99      
 100  <dt>
 101    Initialize a droppable with the <code>disabled</code> option specified.
 102  </dt>
 103  <dd>
 104  <pre><code>$( ".selector" ).droppable({ disabled: true });</code></pre>
 105  </dd>
 106  
 107      
 108  <dt>
 109    Get or set the <code>disabled</code> option, after init.
 110  </dt>
 111  <dd>
 112  <pre><code>//getter
 113  var disabled = $( ".selector" ).droppable( "option", "disabled" );
 114  //setter
 115  $( ".selector" ).droppable( "option", "disabled", true );</code></pre>
 116  </dd>
 117  
 118      </dl>
 119    </div>
 120  </li>
 121  
 122  
 123  <li class="option" id="option-accept">
 124    <div class="option-header">
 125      <h3 class="option-name"><a href="#option-accept">accept</a></h3>
 126      <dl>
 127        <dt class="option-type-label">Type:</dt>
 128          <dd class="option-type">Selector, Function</dd>
 129        
 130        <dt class="option-default-label">Default:</dt>
 131          <dd class="option-default">'*'</dd>
 132        
 133      </dl>
 134    </div>
 135    <div class="option-description">
 136      <p>All draggables that match the selector will be accepted. If a function is specified, the function will be called for each draggable on the page (passed as the first argument to the function), to provide a custom filter. The function should return true if the draggable should be accepted.</p>
 137    </div>
 138    <div class="option-examples">
 139      <h4>Code examples</h4>
 140      <dl class="option-examples-list">
 141      
 142  <dt>
 143    Initialize a droppable with the <code>accept</code> option specified.
 144  </dt>
 145  <dd>
 146  <pre><code>$( ".selector" ).droppable({ accept: '.special' });</code></pre>
 147  </dd>
 148  
 149      
 150  <dt>
 151    Get or set the <code>accept</code> option, after init.
 152  </dt>
 153  <dd>
 154  <pre><code>//getter
 155  var accept = $( ".selector" ).droppable( "option", "accept" );
 156  //setter
 157  $( ".selector" ).droppable( "option", "accept", '.special' );</code></pre>
 158  </dd>
 159  
 160      </dl>
 161    </div>
 162  </li>
 163  
 164  
 165  <li class="option" id="option-activeClass">
 166    <div class="option-header">
 167      <h3 class="option-name"><a href="#option-activeClass">activeClass</a></h3>
 168      <dl>
 169        <dt class="option-type-label">Type:</dt>
 170          <dd class="option-type">String</dd>
 171        
 172        <dt class="option-default-label">Default:</dt>
 173          <dd class="option-default">false</dd>
 174        
 175      </dl>
 176    </div>
 177    <div class="option-description">
 178      <p>If specified, the class will be added to the droppable while an acceptable draggable is being dragged.</p>
 179    </div>
 180    <div class="option-examples">
 181      <h4>Code examples</h4>
 182      <dl class="option-examples-list">
 183      
 184  <dt>
 185    Initialize a droppable with the <code>activeClass</code> option specified.
 186  </dt>
 187  <dd>
 188  <pre><code>$( ".selector" ).droppable({ activeClass: '.ui-state-highlight' });</code></pre>
 189  </dd>
 190  
 191      
 192  <dt>
 193    Get or set the <code>activeClass</code> option, after init.
 194  </dt>
 195  <dd>
 196  <pre><code>//getter
 197  var activeClass = $( ".selector" ).droppable( "option", "activeClass" );
 198  //setter
 199  $( ".selector" ).droppable( "option", "activeClass", '.ui-state-highlight' );</code></pre>
 200  </dd>
 201  
 202      </dl>
 203    </div>
 204  </li>
 205  
 206  
 207  <li class="option" id="option-addClasses">
 208    <div class="option-header">
 209      <h3 class="option-name"><a href="#option-addClasses">addClasses</a></h3>
 210      <dl>
 211        <dt class="option-type-label">Type:</dt>
 212          <dd class="option-type">Boolean</dd>
 213        
 214        <dt class="option-default-label">Default:</dt>
 215          <dd class="option-default">true</dd>
 216        
 217      </dl>
 218    </div>
 219    <div class="option-description">
 220      <p>If set to false, will prevent the ui-droppable class from being added. This may be desired as a performance optimization when calling .droppable() init on many hundreds of elements.</p>
 221    </div>
 222    <div class="option-examples">
 223      <h4>Code examples</h4>
 224      <dl class="option-examples-list">
 225      
 226  <dt>
 227    Initialize a droppable with the <code>addClasses</code> option specified.
 228  </dt>
 229  <dd>
 230  <pre><code>$( ".selector" ).droppable({ addClasses: false });</code></pre>
 231  </dd>
 232  
 233      
 234  <dt>
 235    Get or set the <code>addClasses</code> option, after init.
 236  </dt>
 237  <dd>
 238  <pre><code>//getter
 239  var addClasses = $( ".selector" ).droppable( "option", "addClasses" );
 240  //setter
 241  $( ".selector" ).droppable( "option", "addClasses", false );</code></pre>
 242  </dd>
 243  
 244      </dl>
 245    </div>
 246  </li>
 247  
 248  
 249  <li class="option" id="option-greedy">
 250    <div class="option-header">
 251      <h3 class="option-name"><a href="#option-greedy">greedy</a></h3>
 252      <dl>
 253        <dt class="option-type-label">Type:</dt>
 254          <dd class="option-type">Boolean</dd>
 255        
 256        <dt class="option-default-label">Default:</dt>
 257          <dd class="option-default">false</dd>
 258        
 259      </dl>
 260    </div>
 261    <div class="option-description">
 262      <p>If true, will prevent event propagation on nested droppables.</p>
 263    </div>
 264    <div class="option-examples">
 265      <h4>Code examples</h4>
 266      <dl class="option-examples-list">
 267      
 268  <dt>
 269    Initialize a droppable with the <code>greedy</code> option specified.
 270  </dt>
 271  <dd>
 272  <pre><code>$( ".selector" ).droppable({ greedy: true });</code></pre>
 273  </dd>
 274  
 275      
 276  <dt>
 277    Get or set the <code>greedy</code> option, after init.
 278  </dt>
 279  <dd>
 280  <pre><code>//getter
 281  var greedy = $( ".selector" ).droppable( "option", "greedy" );
 282  //setter
 283  $( ".selector" ).droppable( "option", "greedy", true );</code></pre>
 284  </dd>
 285  
 286      </dl>
 287    </div>
 288  </li>
 289  
 290  
 291  <li class="option" id="option-hoverClass">
 292    <div class="option-header">
 293      <h3 class="option-name"><a href="#option-hoverClass">hoverClass</a></h3>
 294      <dl>
 295        <dt class="option-type-label">Type:</dt>
 296          <dd class="option-type">String</dd>
 297        
 298        <dt class="option-default-label">Default:</dt>
 299          <dd class="option-default">false</dd>
 300        
 301      </dl>
 302    </div>
 303    <div class="option-description">
 304      <p>If specified, the class will be added to the droppable while an acceptable draggable is being hovered.</p>
 305    </div>
 306    <div class="option-examples">
 307      <h4>Code examples</h4>
 308      <dl class="option-examples-list">
 309      
 310  <dt>
 311    Initialize a droppable with the <code>hoverClass</code> option specified.
 312  </dt>
 313  <dd>
 314  <pre><code>$( ".selector" ).droppable({ hoverClass: 'drophover' });</code></pre>
 315  </dd>
 316  
 317      
 318  <dt>
 319    Get or set the <code>hoverClass</code> option, after init.
 320  </dt>
 321  <dd>
 322  <pre><code>//getter
 323  var hoverClass = $( ".selector" ).droppable( "option", "hoverClass" );
 324  //setter
 325  $( ".selector" ).droppable( "option", "hoverClass", 'drophover' );</code></pre>
 326  </dd>
 327  
 328      </dl>
 329    </div>
 330  </li>
 331  
 332  
 333  <li class="option" id="option-scope">
 334    <div class="option-header">
 335      <h3 class="option-name"><a href="#option-scope">scope</a></h3>
 336      <dl>
 337        <dt class="option-type-label">Type:</dt>
 338          <dd class="option-type">String</dd>
 339        
 340        <dt class="option-default-label">Default:</dt>
 341          <dd class="option-default">'default'</dd>
 342        
 343      </dl>
 344    </div>
 345    <div class="option-description">
 346      <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.</p>
 347    </div>
 348    <div class="option-examples">
 349      <h4>Code examples</h4>
 350      <dl class="option-examples-list">
 351      
 352  <dt>
 353    Initialize a droppable with the <code>scope</code> option specified.
 354  </dt>
 355  <dd>
 356  <pre><code>$( ".selector" ).droppable({ scope: 'tasks' });</code></pre>
 357  </dd>
 358  
 359      
 360  <dt>
 361    Get or set the <code>scope</code> option, after init.
 362  </dt>
 363  <dd>
 364  <pre><code>//getter
 365  var scope = $( ".selector" ).droppable( "option", "scope" );
 366  //setter
 367  $( ".selector" ).droppable( "option", "scope", 'tasks' );</code></pre>
 368  </dd>
 369  
 370      </dl>
 371    </div>
 372  </li>
 373  
 374  
 375  <li class="option" id="option-tolerance">
 376    <div class="option-header">
 377      <h3 class="option-name"><a href="#option-tolerance">tolerance</a></h3>
 378      <dl>
 379        <dt class="option-type-label">Type:</dt>
 380          <dd class="option-type">String</dd>
 381        
 382        <dt class="option-default-label">Default:</dt>
 383          <dd class="option-default">'intersect'</dd>
 384        
 385      </dl>
 386    </div>
 387    <div class="option-description">
 388      <p>Specifies which mode to use for testing whether a draggable is 'over' a droppable. Possible values: 'fit', 'intersect', 'pointer', 'touch'.
 389  </p>
 390  <ul>
 391  <li><b>fit</b>: draggable overlaps the droppable entirely</li>
 392  <li><b>intersect</b>: draggable overlaps the droppable at least 50%</li>
 393  <li><b>pointer</b>: mouse pointer overlaps the droppable</li>
 394  <li><b>touch</b>: draggable overlaps the droppable any amount</li>
 395  </ul>
 396  <p></p>
 397    </div>
 398    <div class="option-examples">
 399      <h4>Code examples</h4>
 400      <dl class="option-examples-list">
 401      
 402  <dt>
 403    Initialize a droppable with the <code>tolerance</code> option specified.
 404  </dt>
 405  <dd>
 406  <pre><code>$( ".selector" ).droppable({ tolerance: 'fit' });</code></pre>
 407  </dd>
 408  
 409      
 410  <dt>
 411    Get or set the <code>tolerance</code> option, after init.
 412  </dt>
 413  <dd>
 414  <pre><code>//getter
 415  var tolerance = $( ".selector" ).droppable( "option", "tolerance" );
 416  //setter
 417  $( ".selector" ).droppable( "option", "tolerance", 'fit' );</code></pre>
 418  </dd>
 419  
 420      </dl>
 421    </div>
 422  </li>
 423  
 424      </ul>
 425    </div>
 426    <div id="events">
 427      <h2 class="top-header">Events</h2>
 428      <ul class="events-list">
 429        
 430  <li class="event" id="event-activate">
 431    <div class="event-header">
 432      <h3 class="event-name"><a href="#event-activate">activate</a></h3>
 433      <dl>
 434        <dt class="event-type-label">Type:</dt>
 435          <dd class="event-type">dropactivate</dd>
 436      </dl>
 437    </div>
 438    <div class="event-description">
 439      <p>This event is triggered any time an accepted draggable starts dragging. This can be useful if you want to make the droppable 'light up' when it can be dropped on.</p>
 440    </div>
 441    <div class="event-examples">
 442      <h4>Code examples</h4>
 443      <dl class="event-examples-list">
 444      
 445  <dt>
 446    Supply a callback function to handle the <code>activate</code> event as an init option.
 447  </dt>
 448  <dd>
 449  <pre><code>$( &quot;.selector&quot; ).droppable({
 450     activate: function(event, ui) { ... }
 451  });</code></pre>
 452  </dd>
 453  
 454      
 455  <dt>
 456    Bind to the <code>activate</code> event by type: <code>dropactivate</code>.
 457  </dt>
 458  <dd>
 459  <pre><code>$( &quot;.selector&quot; ).bind( &quot;dropactivate&quot;, function(event, ui) {
 460    ...
 461  });</code></pre>
 462  </dd>
 463  
 464      </dl>
 465    </div>
 466  </li>
 467  
 468  
 469  <li class="event" id="event-deactivate">
 470    <div class="event-header">
 471      <h3 class="event-name"><a href="#event-deactivate">deactivate</a></h3>
 472      <dl>
 473        <dt class="event-type-label">Type:</dt>
 474          <dd class="event-type">dropdeactivate</dd>
 475      </dl>
 476    </div>
 477    <div class="event-description">
 478      <p>This event is triggered any time an accepted draggable stops dragging.</p>
 479    </div>
 480    <div class="event-examples">
 481      <h4>Code examples</h4>
 482      <dl class="event-examples-list">
 483      
 484  <dt>
 485    Supply a callback function to handle the <code>deactivate</code> event as an init option.
 486  </dt>
 487  <dd>
 488  <pre><code>$( &quot;.selector&quot; ).droppable({
 489     deactivate: function(event, ui) { ... }
 490  });</code></pre>
 491  </dd>
 492  
 493      
 494  <dt>
 495    Bind to the <code>deactivate</code> event by type: <code>dropdeactivate</code>.
 496  </dt>
 497  <dd>
 498  <pre><code>$( &quot;.selector&quot; ).bind( &quot;dropdeactivate&quot;, function(event, ui) {
 499    ...
 500  });</code></pre>
 501  </dd>
 502  
 503      </dl>
 504    </div>
 505  </li>
 506  
 507  
 508  <li class="event" id="event-over">
 509    <div class="event-header">
 510      <h3 class="event-name"><a href="#event-over">over</a></h3>
 511      <dl>
 512        <dt class="event-type-label">Type:</dt>
 513          <dd class="event-type">dropover</dd>
 514      </dl>
 515    </div>
 516    <div class="event-description">
 517      <p>This event is triggered as an accepted draggable is dragged 'over' (within the tolerance of) this droppable.</p>
 518    </div>
 519    <div class="event-examples">
 520      <h4>Code examples</h4>
 521      <dl class="event-examples-list">
 522      
 523  <dt>
 524    Supply a callback function to handle the <code>over</code> event as an init option.
 525  </dt>
 526  <dd>
 527  <pre><code>$( &quot;.selector&quot; ).droppable({
 528     over: function(event, ui) { ... }
 529  });</code></pre>
 530  </dd>
 531  
 532      
 533  <dt>
 534    Bind to the <code>over</code> event by type: <code>dropover</code>.
 535  </dt>
 536  <dd>
 537  <pre><code>$( &quot;.selector&quot; ).bind( &quot;dropover&quot;, function(event, ui) {
 538    ...
 539  });</code></pre>
 540  </dd>
 541  
 542      </dl>
 543    </div>
 544  </li>
 545  
 546  
 547  <li class="event" id="event-out">
 548    <div class="event-header">
 549      <h3 class="event-name"><a href="#event-out">out</a></h3>
 550      <dl>
 551        <dt class="event-type-label">Type:</dt>
 552          <dd class="event-type">dropout</dd>
 553      </dl>
 554    </div>
 555    <div class="event-description">
 556      <p>This event is triggered when an accepted draggable is dragged out (within the tolerance of) this droppable.</p>
 557    </div>
 558    <div class="event-examples">
 559      <h4>Code examples</h4>
 560      <dl class="event-examples-list">
 561      
 562  <dt>
 563    Supply a callback function to handle the <code>out</code> event as an init option.
 564  </dt>
 565  <dd>
 566  <pre><code>$( &quot;.selector&quot; ).droppable({
 567     out: function(event, ui) { ... }
 568  });</code></pre>
 569  </dd>
 570  
 571      
 572  <dt>
 573    Bind to the <code>out</code> event by type: <code>dropout</code>.
 574  </dt>
 575  <dd>
 576  <pre><code>$( &quot;.selector&quot; ).bind( &quot;dropout&quot;, function(event, ui) {
 577    ...
 578  });</code></pre>
 579  </dd>
 580  
 581      </dl>
 582    </div>
 583  </li>
 584  
 585  
 586  <li class="event" id="event-drop">
 587    <div class="event-header">
 588      <h3 class="event-name"><a href="#event-drop">drop</a></h3>
 589      <dl>
 590        <dt class="event-type-label">Type:</dt>
 591          <dd class="event-type">drop</dd>
 592      </dl>
 593    </div>
 594    <div class="event-description">
 595      <p>This event is triggered when an accepted draggable is dropped 'over' (within the tolerance of) this droppable. In the callback, $(this) represents the droppable the draggable is dropped on.
 596  ui.draggable represents the draggable.</p>
 597    </div>
 598    <div class="event-examples">
 599      <h4>Code examples</h4>
 600      <dl class="event-examples-list">
 601      
 602  <dt>
 603    Supply a callback function to handle the <code>drop</code> event as an init option.
 604  </dt>
 605  <dd>
 606  <pre><code>$( &quot;.selector&quot; ).droppable({
 607     drop: function(event, ui) { ... }
 608  });</code></pre>
 609  </dd>
 610  
 611      
 612  <dt>
 613    Bind to the <code>drop</code> event by type: <code>drop</code>.
 614  </dt>
 615  <dd>
 616  <pre><code>$( &quot;.selector&quot; ).bind( &quot;drop&quot;, function(event, ui) {
 617    ...
 618  });</code></pre>
 619  </dd>
 620  
 621      </dl>
 622    </div>
 623  </li>
 624  
 625      </ul>
 626    </div>
 627    <div id="methods">
 628      <h2 class="top-header">Methods</h2>
 629      <ul class="methods-list">
 630        
 631  <li class="method" id="method-destroy">
 632    <div class="method-header">
 633      <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
 634      <dl>
 635        <dt class="method-signature-label">Signature:</dt>
 636          <dd class="method-signature">.droppable( "destroy"
 637  
 638  
 639  
 640  
 641  
 642  
 643  
 644  )</dd>
 645      </dl>
 646    </div>
 647    <div class="method-description">
 648      <p>Remove the droppable functionality completely. This will return the element back to its pre-init state.</p>
 649    </div>
 650  </li>
 651  
 652  
 653  <li class="method" id="method-disable">
 654    <div class="method-header">
 655      <h3 class="method-name"><a href="#method-disable">disable</a></h3>
 656      <dl>
 657        <dt class="method-signature-label">Signature:</dt>
 658          <dd class="method-signature">.droppable( "disable"
 659  
 660  
 661  
 662  
 663  
 664  
 665  
 666  )</dd>
 667      </dl>
 668    </div>
 669    <div class="method-description">
 670      <p>Disable the droppable.</p>
 671    </div>
 672  </li>
 673  
 674  
 675  <li class="method" id="method-enable">
 676    <div class="method-header">
 677      <h3 class="method-name"><a href="#method-enable">enable</a></h3>
 678      <dl>
 679        <dt class="method-signature-label">Signature:</dt>
 680          <dd class="method-signature">.droppable( "enable"
 681  
 682  
 683  
 684  
 685  
 686  
 687  
 688  )</dd>
 689      </dl>
 690    </div>
 691    <div class="method-description">
 692      <p>Enable the droppable.</p>
 693    </div>
 694  </li>
 695  
 696  
 697  <li class="method" id="method-option">
 698    <div class="method-header">
 699      <h3 class="method-name"><a href="#method-option">option</a></h3>
 700      <dl>
 701        <dt class="method-signature-label">Signature:</dt>
 702          <dd class="method-signature">.droppable( "option"
 703  
 704  , optionName
 705  
 706  , <span class="optional">[</span>value<span class="optional">] </span>
 707  
 708  
 709  
 710  )</dd>
 711      </dl>
 712    </div>
 713    <div class="method-description">
 714      <p>Get or set any droppable option. If no value is specified, will act as a getter.</p>
 715    </div>
 716  </li>
 717  
 718  
 719  <li class="method" id="method-option">
 720    <div class="method-header">
 721      <h3 class="method-name"><a href="#method-option">option</a></h3>
 722      <dl>
 723        <dt class="method-signature-label">Signature:</dt>
 724          <dd class="method-signature">.droppable( "option"
 725  
 726  , options
 727  
 728  
 729  
 730  
 731  
 732  )</dd>
 733      </dl>
 734    </div>
 735    <div class="method-description">
 736      <p>Set multiple droppable options at once by providing an options object.</p>
 737    </div>
 738  </li>
 739  
 740  
 741  <li class="method" id="method-widget">
 742    <div class="method-header">
 743      <h3 class="method-name"><a href="#method-widget">widget</a></h3>
 744      <dl>
 745        <dt class="method-signature-label">Signature:</dt>
 746          <dd class="method-signature">.droppable( "widget"
 747  
 748  
 749  
 750  
 751  
 752  
 753  
 754  )</dd>
 755      </dl>
 756    </div>
 757    <div class="method-description">
 758      <p>Returns the .ui-droppable element.</p>
 759    </div>
 760  </li>
 761  
 762  
 763      </ul>
 764    </div>
 765    <div id="theming">
 766      <h2 class="top-header">Theming</h2>
 767      <p>The jQuery UI Droppable 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.
 768  </p>
 769    <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.droppable.css stylesheet that can be modified. These classes are highlighed in bold below.
 770  </p>
 771      
 772    <h3>Sample markup with jQuery UI CSS Framework classes</h3>
 773    &lt;div class=&quot;<strong>ui-droppable</strong>&quot;&gt;&lt;/div&gt;
 774    <p class="theme-note">
 775      <strong>
 776        Note: This is a sample of markup generated by the droppable plugin, not markup you should use to create a droppable. The only markup needed for that is &lt;div&gt;&lt;/div&gt;.
 777      </strong>
 778    </p>
 779  
 780    </div>
 781  </div>
 782  
 783  </p><!-- 
 784  Pre-expand include size: 32197 bytes
 785  Post-expand include size: 50784 bytes
 786  Template argument size: 26273 bytes
 787  Maximum: 2097152 bytes
 788  -->
 789  
 790  <!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3341-1!1!0!!en!2 and timestamp 20100421062612 -->