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