| [ Index ] |
PHP Cross Reference of Drupal 6 (gatewave) |
[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 Sortable</h1> 11 <div id="overview"> 12 <h2 class="top-header">Overview</h2> 13 <div id="overview-main"> 14 <p>The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse.</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.helper</b> - the current helper element (most often a clone of the item)</li> 18 <li><b>ui.position</b> - current position of the helper</li> 19 <li><b>ui.offset</b> - current absolute position of the helper</li> 20 <li><b>ui.item</b> - the current dragged element</li> 21 <li><b>ui.placeholder</b> - the placeholder (if you defined one)</li> 22 <li><b>ui.sender</b> - the sortable where the item comes from (only exists if you move from one connected list to another)</li> 23 </ul> 24 </div> 25 <div id="overview-dependencies"> 26 <h3>Dependencies</h3> 27 <ul> 28 <li>UI Core</li> 29 </ul> 30 </div> 31 <div id="overview-example"> 32 <h3>Example</h3> 33 <div id="overview-example" class="example"> 34 <ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul> 35 <p><div id="demo" class="tabs-container" rel="100"> 36 A simple jQuery UI Sortable.<br /> 37 </p> 38 <pre>$("#sortable").sortable(); 39 </pre> 40 <p></div><div id="source" class="tabs-container"> 41 </p> 42 <pre><!DOCTYPE html> 43 <html> 44 <head> 45 <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 46 <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 47 <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 48 <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.sortable.js"></script> 49 <script type="text/javascript"> 50 $(document).ready(function(){ 51 $("#sortable").sortable(); 52 }); 53 </script> 54 </head> 55 <body style="font-size:62.5%;"> 56 57 <div id="sortable"></div> 58 59 </body> 60 </html> 61 </pre> 62 <p></div> 63 </p><p></div> 64 </div> 65 </div> 66 <div id="options"> 67 <h2 class="top-header">Options</h2> 68 <ul class="options-list"> 69 70 <li class="option" id="option-appendTo"> 71 <div class="option-header"> 72 <h3 class="option-name"><a href="#option-appendTo">appendTo</a></h3> 73 <dl> 74 <dt class="option-type-label">Type:</dt> 75 <dd class="option-type">String</dd> 76 77 <dt class="option-default-label">Default:</dt> 78 <dd class="option-default">'parent'</dd> 79 80 </dl> 81 </div> 82 <div class="option-description"> 83 <p>Defines where the helper that moves with the mouse is being appended to during the drag (for example, to resolve overlap/zIndex issues).</p> 84 </div> 85 <div class="option-examples"> 86 <h4>Code examples</h4> 87 <dl class="option-examples-list"> 88 89 <dt> 90 Initialize a sortable with the <code>appendTo</code> option specified. 91 </dt> 92 <dd> 93 <pre><code>$('.selector').sortable({ appendTo: 'body' });</code></pre> 94 </dd> 95 96 97 <dt> 98 Get or set the <code>appendTo</code> option, after init. 99 </dt> 100 <dd> 101 <pre><code>//getter 102 var appendTo = $('.selector').sortable('option', 'appendTo'); 103 //setter 104 $('.selector').sortable('option', 'appendTo', 'body');</code></pre> 105 </dd> 106 107 </dl> 108 </div> 109 </li> 110 111 112 <li class="option" id="option-axis"> 113 <div class="option-header"> 114 <h3 class="option-name"><a href="#option-axis">axis</a></h3> 115 <dl> 116 <dt class="option-type-label">Type:</dt> 117 <dd class="option-type">String</dd> 118 119 <dt class="option-default-label">Default:</dt> 120 <dd class="option-default">false</dd> 121 122 </dl> 123 </div> 124 <div class="option-description"> 125 <p>If defined, the items can be dragged only horizontally or vertically. Possible values:'x', 'y'.</p> 126 </div> 127 <div class="option-examples"> 128 <h4>Code examples</h4> 129 <dl class="option-examples-list"> 130 131 <dt> 132 Initialize a sortable with the <code>axis</code> option specified. 133 </dt> 134 <dd> 135 <pre><code>$('.selector').sortable({ axis: 'x' });</code></pre> 136 </dd> 137 138 139 <dt> 140 Get or set the <code>axis</code> option, after init. 141 </dt> 142 <dd> 143 <pre><code>//getter 144 var axis = $('.selector').sortable('option', 'axis'); 145 //setter 146 $('.selector').sortable('option', 'axis', 'x');</code></pre> 147 </dd> 148 149 </dl> 150 </div> 151 </li> 152 153 154 <li class="option" id="option-cancel"> 155 <div class="option-header"> 156 <h3 class="option-name"><a href="#option-cancel">cancel</a></h3> 157 <dl> 158 <dt class="option-type-label">Type:</dt> 159 <dd class="option-type">Selector</dd> 160 161 <dt class="option-default-label">Default:</dt> 162 <dd class="option-default">':input,button'</dd> 163 164 </dl> 165 </div> 166 <div class="option-description"> 167 <p>Prevents sorting if you start on elements matching the selector.</p> 168 </div> 169 <div class="option-examples"> 170 <h4>Code examples</h4> 171 <dl class="option-examples-list"> 172 173 <dt> 174 Initialize a sortable with the <code>cancel</code> option specified. 175 </dt> 176 <dd> 177 <pre><code>$('.selector').sortable({ cancel: 'button' });</code></pre> 178 </dd> 179 180 181 <dt> 182 Get or set the <code>cancel</code> option, after init. 183 </dt> 184 <dd> 185 <pre><code>//getter 186 var cancel = $('.selector').sortable('option', 'cancel'); 187 //setter 188 $('.selector').sortable('option', 'cancel', 'button');</code></pre> 189 </dd> 190 191 </dl> 192 </div> 193 </li> 194 195 196 <li class="option" id="option-connectWith"> 197 <div class="option-header"> 198 <h3 class="option-name"><a href="#option-connectWith">connectWith</a></h3> 199 <dl> 200 <dt class="option-type-label">Type:</dt> 201 <dd class="option-type">Selector</dd> 202 203 <dt class="option-default-label">Default:</dt> 204 <dd class="option-default">false</dd> 205 206 </dl> 207 </div> 208 <div class="option-description"> 209 <p>Takes a jQuery selector with items that also have sortables applied. If used, the sortable is now connected to the other one-way, so you can drag from this sortable to the other.</p> 210 </div> 211 <div class="option-examples"> 212 <h4>Code examples</h4> 213 <dl class="option-examples-list"> 214 215 <dt> 216 Initialize a sortable with the <code>connectWith</code> option specified. 217 </dt> 218 <dd> 219 <pre><code>$('.selector').sortable({ connectWith: '.otherlist' });</code></pre> 220 </dd> 221 222 223 <dt> 224 Get or set the <code>connectWith</code> option, after init. 225 </dt> 226 <dd> 227 <pre><code>//getter 228 var connectWith = $('.selector').sortable('option', 'connectWith'); 229 //setter 230 $('.selector').sortable('option', 'connectWith', '.otherlist');</code></pre> 231 </dd> 232 233 </dl> 234 </div> 235 </li> 236 237 238 <li class="option" id="option-containment"> 239 <div class="option-header"> 240 <h3 class="option-name"><a href="#option-containment">containment</a></h3> 241 <dl> 242 <dt class="option-type-label">Type:</dt> 243 <dd class="option-type">Element, String, Selector</dd> 244 245 <dt class="option-default-label">Default:</dt> 246 <dd class="option-default">false</dd> 247 248 </dl> 249 </div> 250 <div class="option-description"> 251 <p>Constrains dragging to within the bounds of the specified element - can be a DOM element, 'parent', 'document', 'window', or a jQuery selector.</p> 252 </div> 253 <div class="option-examples"> 254 <h4>Code examples</h4> 255 <dl class="option-examples-list"> 256 257 <dt> 258 Initialize a sortable with the <code>containment</code> option specified. 259 </dt> 260 <dd> 261 <pre><code>$('.selector').sortable({ containment: 'parent' });</code></pre> 262 </dd> 263 264 265 <dt> 266 Get or set the <code>containment</code> option, after init. 267 </dt> 268 <dd> 269 <pre><code>//getter 270 var containment = $('.selector').sortable('option', 'containment'); 271 //setter 272 $('.selector').sortable('option', 'containment', 'parent');</code></pre> 273 </dd> 274 275 </dl> 276 </div> 277 </li> 278 279 280 <li class="option" id="option-cursor"> 281 <div class="option-header"> 282 <h3 class="option-name"><a href="#option-cursor">cursor</a></h3> 283 <dl> 284 <dt class="option-type-label">Type:</dt> 285 <dd class="option-type">String</dd> 286 287 <dt class="option-default-label">Default:</dt> 288 <dd class="option-default">'auto'</dd> 289 290 </dl> 291 </div> 292 <div class="option-description"> 293 <p>Defines the cursor that is being shown while sorting.</p> 294 </div> 295 <div class="option-examples"> 296 <h4>Code examples</h4> 297 <dl class="option-examples-list"> 298 299 <dt> 300 Initialize a sortable with the <code>cursor</code> option specified. 301 </dt> 302 <dd> 303 <pre><code>$('.selector').sortable({ cursor: 'crosshair' });</code></pre> 304 </dd> 305 306 307 <dt> 308 Get or set the <code>cursor</code> option, after init. 309 </dt> 310 <dd> 311 <pre><code>//getter 312 var cursor = $('.selector').sortable('option', 'cursor'); 313 //setter 314 $('.selector').sortable('option', 'cursor', 'crosshair');</code></pre> 315 </dd> 316 317 </dl> 318 </div> 319 </li> 320 321 322 <li class="option" id="option-cursorAt"> 323 <div class="option-header"> 324 <h3 class="option-name"><a href="#option-cursorAt">cursorAt</a></h3> 325 <dl> 326 <dt class="option-type-label">Type:</dt> 327 <dd class="option-type">Object</dd> 328 329 <dt class="option-default-label">Default:</dt> 330 <dd class="option-default">false</dd> 331 332 </dl> 333 </div> 334 <div class="option-description"> 335 <p>Moves the sorting element or 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> 336 </div> 337 <div class="option-examples"> 338 <h4>Code examples</h4> 339 <dl class="option-examples-list"> 340 341 <dt> 342 Initialize a sortable with the <code>cursorAt</code> option specified. 343 </dt> 344 <dd> 345 <pre><code>$('.selector').sortable({ cursorAt: 'top' });</code></pre> 346 </dd> 347 348 349 <dt> 350 Get or set the <code>cursorAt</code> option, after init. 351 </dt> 352 <dd> 353 <pre><code>//getter 354 var cursorAt = $('.selector').sortable('option', 'cursorAt'); 355 //setter 356 $('.selector').sortable('option', 'cursorAt', 'top');</code></pre> 357 </dd> 358 359 </dl> 360 </div> 361 </li> 362 363 364 <li class="option" id="option-delay"> 365 <div class="option-header"> 366 <h3 class="option-name"><a href="#option-delay">delay</a></h3> 367 <dl> 368 <dt class="option-type-label">Type:</dt> 369 <dd class="option-type">Integer</dd> 370 371 <dt class="option-default-label">Default:</dt> 372 <dd class="option-default">0</dd> 373 374 </dl> 375 </div> 376 <div class="option-description"> 377 <p>Time in milliseconds to define when the sorting should start. It helps preventing unwanted drags when clicking on an element.</p> 378 </div> 379 <div class="option-examples"> 380 <h4>Code examples</h4> 381 <dl class="option-examples-list"> 382 383 <dt> 384 Initialize a sortable with the <code>delay</code> option specified. 385 </dt> 386 <dd> 387 <pre><code>$('.selector').sortable({ delay: 500 });</code></pre> 388 </dd> 389 390 391 <dt> 392 Get or set the <code>delay</code> option, after init. 393 </dt> 394 <dd> 395 <pre><code>//getter 396 var delay = $('.selector').sortable('option', 'delay'); 397 //setter 398 $('.selector').sortable('option', 'delay', 500);</code></pre> 399 </dd> 400 401 </dl> 402 </div> 403 </li> 404 405 406 <li class="option" id="option-distance"> 407 <div class="option-header"> 408 <h3 class="option-name"><a href="#option-distance">distance</a></h3> 409 <dl> 410 <dt class="option-type-label">Type:</dt> 411 <dd class="option-type">Integer</dd> 412 413 <dt class="option-default-label">Default:</dt> 414 <dd class="option-default">1</dd> 415 416 </dl> 417 </div> 418 <div class="option-description"> 419 <p>Tolerance, in pixels, for when sorting should start. If specified, sorting will not start until after mouse is dragged beyond distance. Can be used to allow for clicks on elements within a handle.</p> 420 </div> 421 <div class="option-examples"> 422 <h4>Code examples</h4> 423 <dl class="option-examples-list"> 424 425 <dt> 426 Initialize a sortable with the <code>distance</code> option specified. 427 </dt> 428 <dd> 429 <pre><code>$('.selector').sortable({ distance: 30 });</code></pre> 430 </dd> 431 432 433 <dt> 434 Get or set the <code>distance</code> option, after init. 435 </dt> 436 <dd> 437 <pre><code>//getter 438 var distance = $('.selector').sortable('option', 'distance'); 439 //setter 440 $('.selector').sortable('option', 'distance', 30);</code></pre> 441 </dd> 442 443 </dl> 444 </div> 445 </li> 446 447 448 <li class="option" id="option-dropOnEmpty"> 449 <div class="option-header"> 450 <h3 class="option-name"><a href="#option-dropOnEmpty">dropOnEmpty</a></h3> 451 <dl> 452 <dt class="option-type-label">Type:</dt> 453 <dd class="option-type">Boolean</dd> 454 455 <dt class="option-default-label">Default:</dt> 456 <dd class="option-default">true</dd> 457 458 </dl> 459 </div> 460 <div class="option-description"> 461 <p>If empty allows for an item to be dropped from a linked selectable.</p> 462 </div> 463 <div class="option-examples"> 464 <h4>Code examples</h4> 465 <dl class="option-examples-list"> 466 467 <dt> 468 Initialize a sortable with the <code>dropOnEmpty</code> option specified. 469 </dt> 470 <dd> 471 <pre><code>$('.selector').sortable({ dropOnEmpty: false });</code></pre> 472 </dd> 473 474 475 <dt> 476 Get or set the <code>dropOnEmpty</code> option, after init. 477 </dt> 478 <dd> 479 <pre><code>//getter 480 var dropOnEmpty = $('.selector').sortable('option', 'dropOnEmpty'); 481 //setter 482 $('.selector').sortable('option', 'dropOnEmpty', false);</code></pre> 483 </dd> 484 485 </dl> 486 </div> 487 </li> 488 489 490 <li class="option" id="option-forceHelperSize"> 491 <div class="option-header"> 492 <h3 class="option-name"><a href="#option-forceHelperSize">forceHelperSize</a></h3> 493 <dl> 494 <dt class="option-type-label">Type:</dt> 495 <dd class="option-type">Boolean</dd> 496 497 <dt class="option-default-label">Default:</dt> 498 <dd class="option-default">false</dd> 499 500 </dl> 501 </div> 502 <div class="option-description"> 503 <p>If true, forces the helper to have a size.</p> 504 </div> 505 <div class="option-examples"> 506 <h4>Code examples</h4> 507 <dl class="option-examples-list"> 508 509 <dt> 510 Initialize a sortable with the <code>forceHelperSize</code> option specified. 511 </dt> 512 <dd> 513 <pre><code>$('.selector').sortable({ forceHelperSize: true });</code></pre> 514 </dd> 515 516 517 <dt> 518 Get or set the <code>forceHelperSize</code> option, after init. 519 </dt> 520 <dd> 521 <pre><code>//getter 522 var forceHelperSize = $('.selector').sortable('option', 'forceHelperSize'); 523 //setter 524 $('.selector').sortable('option', 'forceHelperSize', true);</code></pre> 525 </dd> 526 527 </dl> 528 </div> 529 </li> 530 531 532 <li class="option" id="option-forcePlaceholderSize"> 533 <div class="option-header"> 534 <h3 class="option-name"><a href="#option-forcePlaceholderSize">forcePlaceholderSize</a></h3> 535 <dl> 536 <dt class="option-type-label">Type:</dt> 537 <dd class="option-type">Boolean</dd> 538 539 <dt class="option-default-label">Default:</dt> 540 <dd class="option-default">false</dd> 541 542 </dl> 543 </div> 544 <div class="option-description"> 545 <p>If true, forces the placeholder to have a size.</p> 546 </div> 547 <div class="option-examples"> 548 <h4>Code examples</h4> 549 <dl class="option-examples-list"> 550 551 <dt> 552 Initialize a sortable with the <code>forcePlaceholderSize</code> option specified. 553 </dt> 554 <dd> 555 <pre><code>$('.selector').sortable({ forcePlaceholderSize: true });</code></pre> 556 </dd> 557 558 559 <dt> 560 Get or set the <code>forcePlaceholderSize</code> option, after init. 561 </dt> 562 <dd> 563 <pre><code>//getter 564 var forcePlaceholderSize = $('.selector').sortable('option', 'forcePlaceholderSize'); 565 //setter 566 $('.selector').sortable('option', 'forcePlaceholderSize', true);</code></pre> 567 </dd> 568 569 </dl> 570 </div> 571 </li> 572 573 574 <li class="option" id="option-grid"> 575 <div class="option-header"> 576 <h3 class="option-name"><a href="#option-grid">grid</a></h3> 577 <dl> 578 <dt class="option-type-label">Type:</dt> 579 <dd class="option-type">Array</dd> 580 581 <dt class="option-default-label">Default:</dt> 582 <dd class="option-default">false</dd> 583 584 </dl> 585 </div> 586 <div class="option-description"> 587 <p>Snaps the sorting element or helper to a grid, every x and y pixels. Array values: [x, y]</p> 588 </div> 589 <div class="option-examples"> 590 <h4>Code examples</h4> 591 <dl class="option-examples-list"> 592 593 <dt> 594 Initialize a sortable with the <code>grid</code> option specified. 595 </dt> 596 <dd> 597 <pre><code>$('.selector').sortable({ grid: [50, 20] });</code></pre> 598 </dd> 599 600 601 <dt> 602 Get or set the <code>grid</code> option, after init. 603 </dt> 604 <dd> 605 <pre><code>//getter 606 var grid = $('.selector').sortable('option', 'grid'); 607 //setter 608 $('.selector').sortable('option', 'grid', [50, 20]);</code></pre> 609 </dd> 610 611 </dl> 612 </div> 613 </li> 614 615 616 <li class="option" id="option-handle"> 617 <div class="option-header"> 618 <h3 class="option-name"><a href="#option-handle">handle</a></h3> 619 <dl> 620 <dt class="option-type-label">Type:</dt> 621 <dd class="option-type">Selector, Element</dd> 622 623 <dt class="option-default-label">Default:</dt> 624 <dd class="option-default">false</dd> 625 626 </dl> 627 </div> 628 <div class="option-description"> 629 <p>Restricts sort start click to the specified element.</p> 630 </div> 631 <div class="option-examples"> 632 <h4>Code examples</h4> 633 <dl class="option-examples-list"> 634 635 <dt> 636 Initialize a sortable with the <code>handle</code> option specified. 637 </dt> 638 <dd> 639 <pre><code>$('.selector').sortable({ handle: 'h2' });</code></pre> 640 </dd> 641 642 643 <dt> 644 Get or set the <code>handle</code> option, after init. 645 </dt> 646 <dd> 647 <pre><code>//getter 648 var handle = $('.selector').sortable('option', 'handle'); 649 //setter 650 $('.selector').sortable('option', 'handle', 'h2');</code></pre> 651 </dd> 652 653 </dl> 654 </div> 655 </li> 656 657 658 <li class="option" id="option-helper"> 659 <div class="option-header"> 660 <h3 class="option-name"><a href="#option-helper">helper</a></h3> 661 <dl> 662 <dt class="option-type-label">Type:</dt> 663 <dd class="option-type">String, Function</dd> 664 665 <dt class="option-default-label">Default:</dt> 666 <dd class="option-default">'original'</dd> 667 668 </dl> 669 </div> 670 <div class="option-description"> 671 <p>Allows for a helper element to be used for dragging display. The supplied function receives the event and the element being sorted, and should return a DOMElement to be used as a custom proxy helper. Possible values: 'original', 'clone'</p> 672 </div> 673 <div class="option-examples"> 674 <h4>Code examples</h4> 675 <dl class="option-examples-list"> 676 677 <dt> 678 Initialize a sortable with the <code>helper</code> option specified. 679 </dt> 680 <dd> 681 <pre><code>$('.selector').sortable({ helper: 'clone' });</code></pre> 682 </dd> 683 684 685 <dt> 686 Get or set the <code>helper</code> option, after init. 687 </dt> 688 <dd> 689 <pre><code>//getter 690 var helper = $('.selector').sortable('option', 'helper'); 691 //setter 692 $('.selector').sortable('option', 'helper', 'clone');</code></pre> 693 </dd> 694 695 </dl> 696 </div> 697 </li> 698 699 700 <li class="option" id="option-items"> 701 <div class="option-header"> 702 <h3 class="option-name"><a href="#option-items">items</a></h3> 703 <dl> 704 <dt class="option-type-label">Type:</dt> 705 <dd class="option-type">Selector</dd> 706 707 <dt class="option-default-label">Default:</dt> 708 <dd class="option-default">'> *'</dd> 709 710 </dl> 711 </div> 712 <div class="option-description"> 713 <p>Specifies which items inside the element should be sortable.</p> 714 </div> 715 <div class="option-examples"> 716 <h4>Code examples</h4> 717 <dl class="option-examples-list"> 718 719 <dt> 720 Initialize a sortable with the <code>items</code> option specified. 721 </dt> 722 <dd> 723 <pre><code>$('.selector').sortable({ items: 'li' });</code></pre> 724 </dd> 725 726 727 <dt> 728 Get or set the <code>items</code> option, after init. 729 </dt> 730 <dd> 731 <pre><code>//getter 732 var items = $('.selector').sortable('option', 'items'); 733 //setter 734 $('.selector').sortable('option', 'items', 'li');</code></pre> 735 </dd> 736 737 </dl> 738 </div> 739 </li> 740 741 742 <li class="option" id="option-opacity"> 743 <div class="option-header"> 744 <h3 class="option-name"><a href="#option-opacity">opacity</a></h3> 745 <dl> 746 <dt class="option-type-label">Type:</dt> 747 <dd class="option-type">Float</dd> 748 749 <dt class="option-default-label">Default:</dt> 750 <dd class="option-default">false</dd> 751 752 </dl> 753 </div> 754 <div class="option-description"> 755 <p>Defines the opacity of the helper while sorting. From 0.01 to 1</p> 756 </div> 757 <div class="option-examples"> 758 <h4>Code examples</h4> 759 <dl class="option-examples-list"> 760 761 <dt> 762 Initialize a sortable with the <code>opacity</code> option specified. 763 </dt> 764 <dd> 765 <pre><code>$('.selector').sortable({ opacity: 0.6 });</code></pre> 766 </dd> 767 768 769 <dt> 770 Get or set the <code>opacity</code> option, after init. 771 </dt> 772 <dd> 773 <pre><code>//getter 774 var opacity = $('.selector').sortable('option', 'opacity'); 775 //setter 776 $('.selector').sortable('option', 'opacity', 0.6);</code></pre> 777 </dd> 778 779 </dl> 780 </div> 781 </li> 782 783 784 <li class="option" id="option-placeholder"> 785 <div class="option-header"> 786 <h3 class="option-name"><a href="#option-placeholder">placeholder</a></h3> 787 <dl> 788 <dt class="option-type-label">Type:</dt> 789 <dd class="option-type">String</dd> 790 791 <dt class="option-default-label">Default:</dt> 792 <dd class="option-default">false</dd> 793 794 </dl> 795 </div> 796 <div class="option-description"> 797 <p>Class that gets applied to the otherwise white space.</p> 798 </div> 799 <div class="option-examples"> 800 <h4>Code examples</h4> 801 <dl class="option-examples-list"> 802 803 <dt> 804 Initialize a sortable with the <code>placeholder</code> option specified. 805 </dt> 806 <dd> 807 <pre><code>$('.selector').sortable({ placeholder: 'ui-state-highlight' });</code></pre> 808 </dd> 809 810 811 <dt> 812 Get or set the <code>placeholder</code> option, after init. 813 </dt> 814 <dd> 815 <pre><code>//getter 816 var placeholder = $('.selector').sortable('option', 'placeholder'); 817 //setter 818 $('.selector').sortable('option', 'placeholder', 'ui-state-highlight');</code></pre> 819 </dd> 820 821 </dl> 822 </div> 823 </li> 824 825 826 <li class="option" id="option-revert"> 827 <div class="option-header"> 828 <h3 class="option-name"><a href="#option-revert">revert</a></h3> 829 <dl> 830 <dt class="option-type-label">Type:</dt> 831 <dd class="option-type">Boolean</dd> 832 833 <dt class="option-default-label">Default:</dt> 834 <dd class="option-default">false</dd> 835 836 </dl> 837 </div> 838 <div class="option-description"> 839 <p>If set to true, the item will be reverted to its new DOM position with a smooth animation.</p> 840 </div> 841 <div class="option-examples"> 842 <h4>Code examples</h4> 843 <dl class="option-examples-list"> 844 845 <dt> 846 Initialize a sortable with the <code>revert</code> option specified. 847 </dt> 848 <dd> 849 <pre><code>$('.selector').sortable({ revert: true });</code></pre> 850 </dd> 851 852 853 <dt> 854 Get or set the <code>revert</code> option, after init. 855 </dt> 856 <dd> 857 <pre><code>//getter 858 var revert = $('.selector').sortable('option', 'revert'); 859 //setter 860 $('.selector').sortable('option', 'revert', true);</code></pre> 861 </dd> 862 863 </dl> 864 </div> 865 </li> 866 867 868 <li class="option" id="option-scroll"> 869 <div class="option-header"> 870 <h3 class="option-name"><a href="#option-scroll">scroll</a></h3> 871 <dl> 872 <dt class="option-type-label">Type:</dt> 873 <dd class="option-type">Boolean</dd> 874 875 <dt class="option-default-label">Default:</dt> 876 <dd class="option-default">true</dd> 877 878 </dl> 879 </div> 880 <div class="option-description"> 881 <p>If set to true, the page scrolls when coming to an edge.</p> 882 </div> 883 <div class="option-examples"> 884 <h4>Code examples</h4> 885 <dl class="option-examples-list"> 886 887 <dt> 888 Initialize a sortable with the <code>scroll</code> option specified. 889 </dt> 890 <dd> 891 <pre><code>$('.selector').sortable({ scroll: false });</code></pre> 892 </dd> 893 894 895 <dt> 896 Get or set the <code>scroll</code> option, after init. 897 </dt> 898 <dd> 899 <pre><code>//getter 900 var scroll = $('.selector').sortable('option', 'scroll'); 901 //setter 902 $('.selector').sortable('option', 'scroll', false);</code></pre> 903 </dd> 904 905 </dl> 906 </div> 907 </li> 908 909 910 <li class="option" id="option-scrollSensitivity"> 911 <div class="option-header"> 912 <h3 class="option-name"><a href="#option-scrollSensitivity">scrollSensitivity</a></h3> 913 <dl> 914 <dt class="option-type-label">Type:</dt> 915 <dd class="option-type">Integer</dd> 916 917 <dt class="option-default-label">Default:</dt> 918 <dd class="option-default">20</dd> 919 920 </dl> 921 </div> 922 <div class="option-description"> 923 <p>Defines how near the mouse must be to an edge to start scrolling.</p> 924 </div> 925 <div class="option-examples"> 926 <h4>Code examples</h4> 927 <dl class="option-examples-list"> 928 929 <dt> 930 Initialize a sortable with the <code>scrollSensitivity</code> option specified. 931 </dt> 932 <dd> 933 <pre><code>$('.selector').sortable({ scrollSensitivity: 40 });</code></pre> 934 </dd> 935 936 937 <dt> 938 Get or set the <code>scrollSensitivity</code> option, after init. 939 </dt> 940 <dd> 941 <pre><code>//getter 942 var scrollSensitivity = $('.selector').sortable('option', 'scrollSensitivity'); 943 //setter 944 $('.selector').sortable('option', 'scrollSensitivity', 40);</code></pre> 945 </dd> 946 947 </dl> 948 </div> 949 </li> 950 951 952 <li class="option" id="option-scrollSpeed"> 953 <div class="option-header"> 954 <h3 class="option-name"><a href="#option-scrollSpeed">scrollSpeed</a></h3> 955 <dl> 956 <dt class="option-type-label">Type:</dt> 957 <dd class="option-type">Integer</dd> 958 959 <dt class="option-default-label">Default:</dt> 960 <dd class="option-default">20</dd> 961 962 </dl> 963 </div> 964 <div class="option-description"> 965 <p>The speed at which the window should scroll once the mouse pointer gets within the scrollSensitivity distance.</p> 966 </div> 967 <div class="option-examples"> 968 <h4>Code examples</h4> 969 <dl class="option-examples-list"> 970 971 <dt> 972 Initialize a sortable with the <code>scrollSpeed</code> option specified. 973 </dt> 974 <dd> 975 <pre><code>$('.selector').sortable({ scrollSpeed: 40 });</code></pre> 976 </dd> 977 978 979 <dt> 980 Get or set the <code>scrollSpeed</code> option, after init. 981 </dt> 982 <dd> 983 <pre><code>//getter 984 var scrollSpeed = $('.selector').sortable('option', 'scrollSpeed'); 985 //setter 986 $('.selector').sortable('option', 'scrollSpeed', 40);</code></pre> 987 </dd> 988 989 </dl> 990 </div> 991 </li> 992 993 994 <li class="option" id="option-tolerance"> 995 <div class="option-header"> 996 <h3 class="option-name"><a href="#option-tolerance">tolerance</a></h3> 997 <dl> 998 <dt class="option-type-label">Type:</dt> 999 <dd class="option-type">String</dd> 1000 1001 <dt class="option-default-label">Default:</dt> 1002 <dd class="option-default">'intersect'</dd> 1003 1004 </dl> 1005 </div> 1006 <div class="option-description"> 1007 <p>This is the way the reordering behaves during drag. Possible values: 'intersect', 'pointer'. In some setups, 'pointer' is more natural. 1008 </p> 1009 <ul> 1010 <li><b>intersect</b>: draggable overlaps the droppable at least 50%</li> 1011 <li><b>pointer</b>: mouse pointer overlaps the droppable</li> 1012 </ul> 1013 <p></p> 1014 </div> 1015 <div class="option-examples"> 1016 <h4>Code examples</h4> 1017 <dl class="option-examples-list"> 1018 1019 <dt> 1020 Initialize a sortable with the <code>tolerance</code> option specified. 1021 </dt> 1022 <dd> 1023 <pre><code>$('.selector').sortable({ tolerance: 'pointer' });</code></pre> 1024 </dd> 1025 1026 1027 <dt> 1028 Get or set the <code>tolerance</code> option, after init. 1029 </dt> 1030 <dd> 1031 <pre><code>//getter 1032 var tolerance = $('.selector').sortable('option', 'tolerance'); 1033 //setter 1034 $('.selector').sortable('option', 'tolerance', 'pointer');</code></pre> 1035 </dd> 1036 1037 </dl> 1038 </div> 1039 </li> 1040 1041 1042 <li class="option" id="option-zIndex"> 1043 <div class="option-header"> 1044 <h3 class="option-name"><a href="#option-zIndex">zIndex</a></h3> 1045 <dl> 1046 <dt class="option-type-label">Type:</dt> 1047 <dd class="option-type">Integer</dd> 1048 1049 <dt class="option-default-label">Default:</dt> 1050 <dd class="option-default">1000</dd> 1051 1052 </dl> 1053 </div> 1054 <div class="option-description"> 1055 <p>Z-index for element/helper while being sorted.</p> 1056 </div> 1057 <div class="option-examples"> 1058 <h4>Code examples</h4> 1059 <dl class="option-examples-list"> 1060 1061 <dt> 1062 Initialize a sortable with the <code>zIndex</code> option specified. 1063 </dt> 1064 <dd> 1065 <pre><code>$('.selector').sortable({ zIndex: 5 });</code></pre> 1066 </dd> 1067 1068 1069 <dt> 1070 Get or set the <code>zIndex</code> option, after init. 1071 </dt> 1072 <dd> 1073 <pre><code>//getter 1074 var zIndex = $('.selector').sortable('option', 'zIndex'); 1075 //setter 1076 $('.selector').sortable('option', 'zIndex', 5);</code></pre> 1077 </dd> 1078 1079 </dl> 1080 </div> 1081 </li> 1082 1083 </ul> 1084 </div> 1085 <div id="events"> 1086 <h2 class="top-header">Events</h2> 1087 <ul class="events-list"> 1088 1089 <li class="event" id="event-start"> 1090 <div class="event-header"> 1091 <h3 class="event-name"><a href="#event-start">start</a></h3> 1092 <dl> 1093 <dt class="event-type-label">Type:</dt> 1094 <dd class="event-type">sortstart</dd> 1095 </dl> 1096 </div> 1097 <div class="event-description"> 1098 <p>This event is triggered when sorting starts.</p> 1099 </div> 1100 <div class="event-examples"> 1101 <h4>Code examples</h4> 1102 <dl class="event-examples-list"> 1103 1104 <dt> 1105 Supply a callback function to handle the <code>start</code> event as an init option. 1106 </dt> 1107 <dd> 1108 <pre><code>$('.selector').sortable({ 1109 start: function(event, ui) { ... } 1110 });</code></pre> 1111 </dd> 1112 1113 1114 <dt> 1115 Bind to the <code>start</code> event by type: <code>sortstart</code>. 1116 </dt> 1117 <dd> 1118 <pre><code>$('.selector').bind('sortstart', function(event, ui) { 1119 ... 1120 });</code></pre> 1121 </dd> 1122 1123 </dl> 1124 </div> 1125 </li> 1126 1127 1128 <li class="event" id="event-sort"> 1129 <div class="event-header"> 1130 <h3 class="event-name"><a href="#event-sort">sort</a></h3> 1131 <dl> 1132 <dt class="event-type-label">Type:</dt> 1133 <dd class="event-type">sort</dd> 1134 </dl> 1135 </div> 1136 <div class="event-description"> 1137 <p>This event is triggered during sorting.</p> 1138 </div> 1139 <div class="event-examples"> 1140 <h4>Code examples</h4> 1141 <dl class="event-examples-list"> 1142 1143 <dt> 1144 Supply a callback function to handle the <code>sort</code> event as an init option. 1145 </dt> 1146 <dd> 1147 <pre><code>$('.selector').sortable({ 1148 sort: function(event, ui) { ... } 1149 });</code></pre> 1150 </dd> 1151 1152 1153 <dt> 1154 Bind to the <code>sort</code> event by type: <code>sort</code>. 1155 </dt> 1156 <dd> 1157 <pre><code>$('.selector').bind('sort', function(event, ui) { 1158 ... 1159 });</code></pre> 1160 </dd> 1161 1162 </dl> 1163 </div> 1164 </li> 1165 1166 1167 <li class="event" id="event-change"> 1168 <div class="event-header"> 1169 <h3 class="event-name"><a href="#event-change">change</a></h3> 1170 <dl> 1171 <dt class="event-type-label">Type:</dt> 1172 <dd class="event-type">sortchange</dd> 1173 </dl> 1174 </div> 1175 <div class="event-description"> 1176 <p>This event is triggered during sorting, but only when the DOM position has changed.</p> 1177 </div> 1178 <div class="event-examples"> 1179 <h4>Code examples</h4> 1180 <dl class="event-examples-list"> 1181 1182 <dt> 1183 Supply a callback function to handle the <code>change</code> event as an init option. 1184 </dt> 1185 <dd> 1186 <pre><code>$('.selector').sortable({ 1187 change: function(event, ui) { ... } 1188 });</code></pre> 1189 </dd> 1190 1191 1192 <dt> 1193 Bind to the <code>change</code> event by type: <code>sortchange</code>. 1194 </dt> 1195 <dd> 1196 <pre><code>$('.selector').bind('sortchange', function(event, ui) { 1197 ... 1198 });</code></pre> 1199 </dd> 1200 1201 </dl> 1202 </div> 1203 </li> 1204 1205 1206 <li class="event" id="event-beforeStop"> 1207 <div class="event-header"> 1208 <h3 class="event-name"><a href="#event-beforeStop">beforeStop</a></h3> 1209 <dl> 1210 <dt class="event-type-label">Type:</dt> 1211 <dd class="event-type">sortbeforeStop</dd> 1212 </dl> 1213 </div> 1214 <div class="event-description"> 1215 <p>This event is triggered when sorting stops, but when the placeholder/helper is still available.</p> 1216 </div> 1217 <div class="event-examples"> 1218 <h4>Code examples</h4> 1219 <dl class="event-examples-list"> 1220 1221 <dt> 1222 Supply a callback function to handle the <code>beforeStop</code> event as an init option. 1223 </dt> 1224 <dd> 1225 <pre><code>$('.selector').sortable({ 1226 beforeStop: function(event, ui) { ... } 1227 });</code></pre> 1228 </dd> 1229 1230 1231 <dt> 1232 Bind to the <code>beforeStop</code> event by type: <code>sortbeforeStop</code>. 1233 </dt> 1234 <dd> 1235 <pre><code>$('.selector').bind('sortbeforeStop', function(event, ui) { 1236 ... 1237 });</code></pre> 1238 </dd> 1239 1240 </dl> 1241 </div> 1242 </li> 1243 1244 1245 <li class="event" id="event-stop"> 1246 <div class="event-header"> 1247 <h3 class="event-name"><a href="#event-stop">stop</a></h3> 1248 <dl> 1249 <dt class="event-type-label">Type:</dt> 1250 <dd class="event-type">sortstop</dd> 1251 </dl> 1252 </div> 1253 <div class="event-description"> 1254 <p>This event is triggered when sorting has stopped.</p> 1255 </div> 1256 <div class="event-examples"> 1257 <h4>Code examples</h4> 1258 <dl class="event-examples-list"> 1259 1260 <dt> 1261 Supply a callback function to handle the <code>stop</code> event as an init option. 1262 </dt> 1263 <dd> 1264 <pre><code>$('.selector').sortable({ 1265 stop: function(event, ui) { ... } 1266 });</code></pre> 1267 </dd> 1268 1269 1270 <dt> 1271 Bind to the <code>stop</code> event by type: <code>sortstop</code>. 1272 </dt> 1273 <dd> 1274 <pre><code>$('.selector').bind('sortstop', function(event, ui) { 1275 ... 1276 });</code></pre> 1277 </dd> 1278 1279 </dl> 1280 </div> 1281 </li> 1282 1283 1284 <li class="event" id="event-update"> 1285 <div class="event-header"> 1286 <h3 class="event-name"><a href="#event-update">update</a></h3> 1287 <dl> 1288 <dt class="event-type-label">Type:</dt> 1289 <dd class="event-type">sortupdate</dd> 1290 </dl> 1291 </div> 1292 <div class="event-description"> 1293 <p>This event is triggered when the user stopped sorting and the DOM position has changed.</p> 1294 </div> 1295 <div class="event-examples"> 1296 <h4>Code examples</h4> 1297 <dl class="event-examples-list"> 1298 1299 <dt> 1300 Supply a callback function to handle the <code>update</code> event as an init option. 1301 </dt> 1302 <dd> 1303 <pre><code>$('.selector').sortable({ 1304 update: function(event, ui) { ... } 1305 });</code></pre> 1306 </dd> 1307 1308 1309 <dt> 1310 Bind to the <code>update</code> event by type: <code>sortupdate</code>. 1311 </dt> 1312 <dd> 1313 <pre><code>$('.selector').bind('sortupdate', function(event, ui) { 1314 ... 1315 });</code></pre> 1316 </dd> 1317 1318 </dl> 1319 </div> 1320 </li> 1321 1322 1323 <li class="event" id="event-receive"> 1324 <div class="event-header"> 1325 <h3 class="event-name"><a href="#event-receive">receive</a></h3> 1326 <dl> 1327 <dt class="event-type-label">Type:</dt> 1328 <dd class="event-type">sortreceive</dd> 1329 </dl> 1330 </div> 1331 <div class="event-description"> 1332 <p>This event is triggered when a connected sortable list has received an item from another list.</p> 1333 </div> 1334 <div class="event-examples"> 1335 <h4>Code examples</h4> 1336 <dl class="event-examples-list"> 1337 1338 <dt> 1339 Supply a callback function to handle the <code>receive</code> event as an init option. 1340 </dt> 1341 <dd> 1342 <pre><code>$('.selector').sortable({ 1343 receive: function(event, ui) { ... } 1344 });</code></pre> 1345 </dd> 1346 1347 1348 <dt> 1349 Bind to the <code>receive</code> event by type: <code>sortreceive</code>. 1350 </dt> 1351 <dd> 1352 <pre><code>$('.selector').bind('sortreceive', function(event, ui) { 1353 ... 1354 });</code></pre> 1355 </dd> 1356 1357 </dl> 1358 </div> 1359 </li> 1360 1361 1362 <li class="event" id="event-remove"> 1363 <div class="event-header"> 1364 <h3 class="event-name"><a href="#event-remove">remove</a></h3> 1365 <dl> 1366 <dt class="event-type-label">Type:</dt> 1367 <dd class="event-type">sortremove</dd> 1368 </dl> 1369 </div> 1370 <div class="event-description"> 1371 <p>This event is triggered when a sortable item has been dragged out from the list and into another.</p> 1372 </div> 1373 <div class="event-examples"> 1374 <h4>Code examples</h4> 1375 <dl class="event-examples-list"> 1376 1377 <dt> 1378 Supply a callback function to handle the <code>remove</code> event as an init option. 1379 </dt> 1380 <dd> 1381 <pre><code>$('.selector').sortable({ 1382 remove: function(event, ui) { ... } 1383 });</code></pre> 1384 </dd> 1385 1386 1387 <dt> 1388 Bind to the <code>remove</code> event by type: <code>sortremove</code>. 1389 </dt> 1390 <dd> 1391 <pre><code>$('.selector').bind('sortremove', function(event, ui) { 1392 ... 1393 });</code></pre> 1394 </dd> 1395 1396 </dl> 1397 </div> 1398 </li> 1399 1400 1401 <li class="event" id="event-over"> 1402 <div class="event-header"> 1403 <h3 class="event-name"><a href="#event-over">over</a></h3> 1404 <dl> 1405 <dt class="event-type-label">Type:</dt> 1406 <dd class="event-type">sortover</dd> 1407 </dl> 1408 </div> 1409 <div class="event-description"> 1410 <p>This event is triggered when a sortable item is moved into a connected list.</p> 1411 </div> 1412 <div class="event-examples"> 1413 <h4>Code examples</h4> 1414 <dl class="event-examples-list"> 1415 1416 <dt> 1417 Supply a callback function to handle the <code>over</code> event as an init option. 1418 </dt> 1419 <dd> 1420 <pre><code>$('.selector').sortable({ 1421 over: function(event, ui) { ... } 1422 });</code></pre> 1423 </dd> 1424 1425 1426 <dt> 1427 Bind to the <code>over</code> event by type: <code>sortover</code>. 1428 </dt> 1429 <dd> 1430 <pre><code>$('.selector').bind('sortover', function(event, ui) { 1431 ... 1432 });</code></pre> 1433 </dd> 1434 1435 </dl> 1436 </div> 1437 </li> 1438 1439 1440 <li class="event" id="event-out"> 1441 <div class="event-header"> 1442 <h3 class="event-name"><a href="#event-out">out</a></h3> 1443 <dl> 1444 <dt class="event-type-label">Type:</dt> 1445 <dd class="event-type">sortout</dd> 1446 </dl> 1447 </div> 1448 <div class="event-description"> 1449 <p>This event is triggered when a sortable item is moved away from a connected list.</p> 1450 </div> 1451 <div class="event-examples"> 1452 <h4>Code examples</h4> 1453 <dl class="event-examples-list"> 1454 1455 <dt> 1456 Supply a callback function to handle the <code>out</code> event as an init option. 1457 </dt> 1458 <dd> 1459 <pre><code>$('.selector').sortable({ 1460 out: function(event, ui) { ... } 1461 });</code></pre> 1462 </dd> 1463 1464 1465 <dt> 1466 Bind to the <code>out</code> event by type: <code>sortout</code>. 1467 </dt> 1468 <dd> 1469 <pre><code>$('.selector').bind('sortout', function(event, ui) { 1470 ... 1471 });</code></pre> 1472 </dd> 1473 1474 </dl> 1475 </div> 1476 </li> 1477 1478 1479 <li class="event" id="event-activate"> 1480 <div class="event-header"> 1481 <h3 class="event-name"><a href="#event-activate">activate</a></h3> 1482 <dl> 1483 <dt class="event-type-label">Type:</dt> 1484 <dd class="event-type">sortactivate</dd> 1485 </dl> 1486 </div> 1487 <div class="event-description"> 1488 <p>This event is triggered when using connected lists, every connected list on drag start receives it.</p> 1489 </div> 1490 <div class="event-examples"> 1491 <h4>Code examples</h4> 1492 <dl class="event-examples-list"> 1493 1494 <dt> 1495 Supply a callback function to handle the <code>activate</code> event as an init option. 1496 </dt> 1497 <dd> 1498 <pre><code>$('.selector').sortable({ 1499 activate: function(event, ui) { ... } 1500 });</code></pre> 1501 </dd> 1502 1503 1504 <dt> 1505 Bind to the <code>activate</code> event by type: <code>sortactivate</code>. 1506 </dt> 1507 <dd> 1508 <pre><code>$('.selector').bind('sortactivate', function(event, ui) { 1509 ... 1510 });</code></pre> 1511 </dd> 1512 1513 </dl> 1514 </div> 1515 </li> 1516 1517 1518 <li class="event" id="event-deactivate"> 1519 <div class="event-header"> 1520 <h3 class="event-name"><a href="#event-deactivate">deactivate</a></h3> 1521 <dl> 1522 <dt class="event-type-label">Type:</dt> 1523 <dd class="event-type">sortdeactivate</dd> 1524 </dl> 1525 </div> 1526 <div class="event-description"> 1527 <p>This event is triggered when sorting was stopped, is propagated to all possible connected lists.</p> 1528 </div> 1529 <div class="event-examples"> 1530 <h4>Code examples</h4> 1531 <dl class="event-examples-list"> 1532 1533 <dt> 1534 Supply a callback function to handle the <code>deactivate</code> event as an init option. 1535 </dt> 1536 <dd> 1537 <pre><code>$('.selector').sortable({ 1538 deactivate: function(event, ui) { ... } 1539 });</code></pre> 1540 </dd> 1541 1542 1543 <dt> 1544 Bind to the <code>deactivate</code> event by type: <code>sortdeactivate</code>. 1545 </dt> 1546 <dd> 1547 <pre><code>$('.selector').bind('sortdeactivate', function(event, ui) { 1548 ... 1549 });</code></pre> 1550 </dd> 1551 1552 </dl> 1553 </div> 1554 </li> 1555 1556 </ul> 1557 </div> 1558 <div id="methods"> 1559 <h2 class="top-header">Methods</h2> 1560 <ul class="methods-list"> 1561 1562 <li class="method" id="method-destroy"> 1563 <div class="method-header"> 1564 <h3 class="method-name"><a href="#method-destroy">destroy</a></h3> 1565 <dl> 1566 <dt class="method-signature-label">Signature:</dt> 1567 <dd class="method-signature">.sortable( 'destroy' 1568 1569 1570 1571 1572 1573 1574 1575 )</dd> 1576 </dl> 1577 </div> 1578 <div class="method-description"> 1579 <p>Remove the sortable functionality completely. This will return the element back to its pre-init state.</p> 1580 </div> 1581 </li> 1582 1583 1584 <li class="method" id="method-disable"> 1585 <div class="method-header"> 1586 <h3 class="method-name"><a href="#method-disable">disable</a></h3> 1587 <dl> 1588 <dt class="method-signature-label">Signature:</dt> 1589 <dd class="method-signature">.sortable( 'disable' 1590 1591 1592 1593 1594 1595 1596 1597 )</dd> 1598 </dl> 1599 </div> 1600 <div class="method-description"> 1601 <p>Disable the sortable.</p> 1602 </div> 1603 </li> 1604 1605 1606 <li class="method" id="method-enable"> 1607 <div class="method-header"> 1608 <h3 class="method-name"><a href="#method-enable">enable</a></h3> 1609 <dl> 1610 <dt class="method-signature-label">Signature:</dt> 1611 <dd class="method-signature">.sortable( 'enable' 1612 1613 1614 1615 1616 1617 1618 1619 )</dd> 1620 </dl> 1621 </div> 1622 <div class="method-description"> 1623 <p>Enable the sortable.</p> 1624 </div> 1625 </li> 1626 1627 1628 <li class="method" id="method-option"> 1629 <div class="method-header"> 1630 <h3 class="method-name"><a href="#method-option">option</a></h3> 1631 <dl> 1632 <dt class="method-signature-label">Signature:</dt> 1633 <dd class="method-signature">.sortable( 'option' 1634 1635 , optionName 1636 1637 , <span class="optional">[</span>value<span class="optional">] </span> 1638 1639 1640 1641 )</dd> 1642 </dl> 1643 </div> 1644 <div class="method-description"> 1645 <p>Get or set any sortable option. If no value is specified, will act as a getter.</p> 1646 </div> 1647 </li> 1648 1649 1650 <li class="method" id="method-serialize"> 1651 <div class="method-header"> 1652 <h3 class="method-name"><a href="#method-serialize">serialize</a></h3> 1653 <dl> 1654 <dt class="method-signature-label">Signature:</dt> 1655 <dd class="method-signature">.sortable( 'serialize' 1656 1657 , <span class="optional">[</span>options<span class="optional">] </span> 1658 1659 1660 1661 1662 1663 )</dd> 1664 </dl> 1665 </div> 1666 <div class="method-description"> 1667 <p>Serializes the sortable's item id's into a form/ajax submittable string. Calling this method produces a hash that can be appended to any url to easily submit a new item order back to the server. 1668 </p><p>It works by default by looking at the id of each item in the format 'setname_number', and it spits out a hash like "setname[]=number&setname[]=number". 1669 </p><p>You can also give in a option hash as second argument to custom define how the function works. The possible options are: 'key' (replaces part1[] with whatever you want), 'attribute' (test another attribute than 'id') and 'expression' (use your own regexp). 1670 </p><p>If serialize returns an empty string, make sure the id attributes include an underscore. They must be in the form: "set_number" For example, a 3 element list with id attributes foo_1, foo_5, foo_2 will serialize to foo[]=1&foo[]=5&foo[]=2. You can use an underscore, equal sign or hyphen to separate the set and number. For example foo=1 or foo-1 or foo_1 all serialize to foo[]=1.</p> 1671 </div> 1672 </li> 1673 1674 1675 <li class="method" id="method-toArray"> 1676 <div class="method-header"> 1677 <h3 class="method-name"><a href="#method-toArray">toArray</a></h3> 1678 <dl> 1679 <dt class="method-signature-label">Signature:</dt> 1680 <dd class="method-signature">.sortable( 'toArray' 1681 1682 1683 1684 1685 1686 1687 1688 )</dd> 1689 </dl> 1690 </div> 1691 <div class="method-description"> 1692 <p>Serializes the sortable's item id's into an array of string. If you have 1693 </p> 1694 <pre> 1695 <ul id="a_sortable"><br> 1696 <li id="hello">Hello</li><br> 1697 <li id="goodbye">Good bye</li><br> 1698 </ul> 1699 </pre> 1700 <p>and do 1701 </p> 1702 <pre>var result = $('#a_sortable').sortable('toArray');</pre> 1703 <p>then 1704 </p> 1705 <pre>result[0] will contain "hello" and result[1] will contain "goodbye".</pre></p> 1706 </div> 1707 </li> 1708 1709 <p> 1710 <li class="method" id="method-refresh"> 1711 <div class="method-header"> 1712 <h3 class="method-name"><a href="#method-refresh">refresh</a></h3> 1713 <dl> 1714 <dt class="method-signature-label">Signature:</dt> 1715 <dd class="method-signature">.sortable( 'refresh' 1716 1717 1718 1719 1720 1721 1722 1723 )</dd> 1724 </dl> 1725 </div> 1726 <div class="method-description"> 1727 <p>Refresh the sortable items. Custom trigger the reloading of all sortable items, causing new items to be recognized.</p> 1728 </div> 1729 </li> 1730 1731 1732 <li class="method" id="method-refreshPositions"> 1733 <div class="method-header"> 1734 <h3 class="method-name"><a href="#method-refreshPositions">refreshPositions</a></h3> 1735 <dl> 1736 <dt class="method-signature-label">Signature:</dt> 1737 <dd class="method-signature">.sortable( 'refreshPositions' 1738 1739 1740 1741 1742 1743 1744 1745 )</dd> 1746 </dl> 1747 </div> 1748 <div class="method-description"> 1749 <p>Refresh the cached positions of the sortables' items. Calling this method refreshes the cached item positions of all sortables. This is usually done automatically by the script and slows down performance. Use wisely.</p> 1750 </div> 1751 </li> 1752 1753 1754 <li class="method" id="method-cancel"> 1755 <div class="method-header"> 1756 <h3 class="method-name"><a href="#method-cancel">cancel</a></h3> 1757 <dl> 1758 <dt class="method-signature-label">Signature:</dt> 1759 <dd class="method-signature">.sortable( 'cancel' 1760 1761 1762 1763 1764 1765 1766 1767 )</dd> 1768 </dl> 1769 </div> 1770 <div class="method-description"> 1771 <p>Cancels a change in the current sortable and reverts it back to how it was before the current sort started. Useful in the stop and receive callback functions. 1772 </p><p>If the sortable item is not being moved from one connected sortable to another: 1773 </p> 1774 <pre>$(this).sortable('cancel');</pre> 1775 <p>will cancel the change. 1776 </p><p>If the sortable item is being moved from one connected sortable to another: 1777 </p> 1778 <pre>$(ui.sender).sortable('cancel');</pre> 1779 <p>will cancel the change. Useful in the 'receive' callback.</p> 1780 </div> 1781 </li> 1782 1783 </ul> 1784 </div> 1785 <div id="theming"> 1786 <h2 class="top-header">Theming</h2> 1787 <p>The jQuery UI Sortable 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. 1788 </p> 1789 <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the ui.sortable.css stylesheet that can be modified. These classes are highlighed in bold below. 1790 </p> 1791 1792 <h3>Sample markup with jQuery UI CSS Framework classes</h3> 1793 <ul class="<strong>ui-sortable</strong>"><br /> 1794    <li></li><br /> 1795    <li></li><br /> 1796    <li></li><br /> 1797 </ul> 1798 <p class="theme-note"> 1799 <strong> 1800 Note: This is a sample of markup generated by the sortable plugin, not markup you should use to create a sortable. The only markup needed for that is <br /><ul><br /> 1801    <li></li><br /> 1802    <li></li><br /> 1803    <li></li><br /> 1804 </ul>. 1805 </strong> 1806 </p> 1807 1808 </div> 1809 </div> 1810 1811 </p><!-- 1812 Pre-expand include size: 68721 bytes 1813 Post-expand include size: 120119 bytes 1814 Template argument size: 70108 bytes 1815 Maximum: 2097152 bytes 1816 --> 1817 1818 <!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3344-1!1!0!!en!2 and timestamp 20090604112215 -->
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated: Thu Mar 24 11:18:33 2011 | Cross-referenced by PHPXref 0.7 |