YouTip

## Default Functionality Enable sortable functionality on any DOM element. By clicking and dragging an element to a new position in the list, other items adjust automatically. By default, sortable items share the `draggable` attribute. #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } #sortable li span { position: absolute; margin-left: -1.3em; } $(function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); });

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7

## Connected Lists Sort items from one list into another and vice versa by passing a selector to the `connectWith` option. The simplest way is to group all relevant lists with a certain CSS class, then pass that class to the sortable function (e.g., `connectWith: '.myclass'`). #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; } #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } $(function() { $( "#sortable1, #sortable2" ).sortable({ connectWith: ".connectedSortable" }).disableSelection(); });

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

## Tabs Connected Lists Sort items from one list into another and vice versa by placing list items into the appropriate tabs at the top. #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } $(function() { $( "#sortable1, #sortable2" ).sortable().disableSelection(); var $tabs = $( "#tabs" ).tabs(); var $tab_items = $( "ul:first li", $tabs ).droppable({ accept: ".connectedSortable li", hoverClass: "ui-state-hover", drop: function( event, ui ) { var $item = $( this ); var $list = $( $item.find( "a" ).attr( "href" ) ) .find( ".connectedSortable" ); ui.draggable.hide( "slow", function() { $tabs.tabs( "option", "active", $tab_items.index( $item ) ); $( this ).appendTo( $list ).show( "slow" ); }); } }); }); ## Delay Start Prevent accidental sorting with time and distance delays. Set the number of milliseconds that must elapse before sorting starts with the `delay` option. Set the number of pixels that must be dragged before sorting starts with the `distance` option. #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px;zoom: 1; } #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 95%; } $(function() { $( "#sortable1" ).sortable({ delay: 300 }); $( "#sortable2" ).sortable({ distance: 15 }); $( "li" ).disableSelection(); });

Time delay 300ms:

• Item 1
• Item 2
• Item 3
• Item 4

Distance delay 15px:

• Item 1
• Item 2
• Item 3
• Item 4

## Display as Grid Display sortable items as a grid using CSS to make them the same size and float them. #sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; } #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; } $(function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

## Placeholder When dragging a sortable item to a new position, other items will make space for it. Pass a class to the `placeholder` option to define the style of the visual gap. Use the boolean `forcePlaceholderSize` option to set the size of the placeholder. #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; } html>body #sortable li { height: 1.5em; line-height: 1.2em; } .ui-state-highlight { height: 1.5em; line-height: 1.2em; } $(function() { $( "#sortable" ).sortable({ placeholder: "ui-state-highlight" }); $( "#sortable" ).disableSelection(); });

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7

## Handle Empty Lists Prevent all items in a list from being placed into a single empty list by setting the `dropOnEmpty` option to `false`. By default, sortable items can be placed into empty lists. #sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;} #sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; } $(function() { $( "ul.droptrue" ).sortable({ connectWith: "ul" }); $( "ul.dropfalse" ).sortable({ connectWith: "ul", dropOnEmpty: false }); $( "#sortable1, #sortable2, #sortable3" ).disableSelection(); });

• Can be placed into..
• ..an empty list
• Item 3
• Item 4
• Item 5

• Cannot be placed into..
• ..an empty list
• Item 3
• Item 4
• Item 5

## Include/Exclude Items Specify which items are sortable by passing a jQuery selector to the `items` option. Items outside of this option are not sortable and are also not valid drop targets for sortable items. If you only want to prevent specific items from being sorted, pass a jQuery selector to the `cancel` option. Canceled items remain valid drop targets for other items. #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; zoom: 1; } #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 3px; width: 90%; } $(function() { $( "#sortable1" ).sortable({ items: "li:not(.ui-state-disabled)" }); $( "#sortable2" ).sortable({ cancel: ".ui-state-disabled" }); $( "#sortable1 li, #sortable2 li" ).disableSelection(); });

Specify which items are sortable:

• Item 1
• I'm not sortable or a drop target
• I'm not sortable or a drop target
• Item 4

Cancel sorting (but as a drop target):

• Item 1
• I'm not sortable but I am a drop target
• I'm not sortable but I am a drop target
• Item 4