jQuery UI Sortable animations -

i have grid-like list, , have sortable functionality working in it, planned. want animate every item except 1 being manipulated smoothly slide in list. have example set here: http://jsfiddle.net/wpmte/.

<ul id="sort">     <li>item 1</li>     <li>item 2</li>     <li>item 3</li>     <li>item 4</li>     <li>item 5</li>     <li>item 6</li>     <li>item 7</li>     <li>item 8</li>     <li>item 9</li> </ul> 

the css:

ul {     margin: 0;     padding: 0; } li {     display: inline-block;     margin: 5px;     padding: 5px;     background: #0f0;     width: 25%; } .ui-sortable-placeholder {     height: 0 !important; } 

and finally, js:

$('#sort').sortable({   }); 

how can animate elements fill in space transitions rather jumping?

here's how did it:

// needed allow multiple placeholders animate var placeholdernumber = 0;  $('#new-ct-banner-tree').sortable({     // basic setup     distance: 15,     placeholder: 'tree-drop-placeholder',     items: ".tree-item:not(.new-ct-tree-group-item, .group-add-button)",     connectwith: ".connectedsortable",     handle: ".top-drag-handle",     helper: "clone",     opacity: 0.75,     revert: 300,     scrollspeed: 4,     cursor: "move",      start: function(event, ui) {         // when starting drag, add our replacement placeholder. set height of default placeholder 30px (see css below), replacement needs same height , original gets negative margin of height , our replacement consumes original.         $(ui.placeholder).before('<div class="temp-spacer-' + placeholdernumber +     '"></div>').css('margin-top', '-30px');         $('.temp-spacer-' + placeholdernumber).css('height', '30px');     },     change: function(e, ui) {         // when placeholder changes, animage away old one, , animate in new one, if little delay has passed avoid crazy jank town.         if ($(ui.item).parent().hasclass('delayplaceholdermovement') == false) {             // if parent doesn't have 'delay' class, proceed animating away current placeholder.             $('.temp-spacer-' + placeholdernumber).animate({                 height: "0px"             }, 200, function() {                 $(this).remove();             });             // iterate placeholder number keep old , new ones separated.             placeholdernumber = placeholdernumber + 1;              // add , animate in new location placeholder.             $(ui.placeholder).before('<div style="height:0px;" class="temp-spacer-' + placeholdernumber + '"></div>');             $('.temp-spacer-' + placeholdernumber).animate({                 height: "30px"             }, 200);         };         // add 'delay' class parent         $(ui.item).parent().addclass('delayplaceholdermovement');         // , set timeout remove parent after 40ms         window.settimeout(function() {             $(ui.item).parent().removeclass('delayplaceholdermovement');         }, 40);     },     stop: function(event, ui) {         // remove our fake placeholder , strip regular placeholders negative margin.         $('.temp-spacer-' + placeholdernumber).css('height', 0).remove();         $(ui.placeholder).css('margin-top', '0px');         // clear placeholder number doesn't go bagillions after performing few dragg events.         placeholdernumber = 0;     } });   // css: // setting height of default placeholder. if want style placeholder, you'd set additional class on our replacement animated placeholder. .tree-drop-placeholder {     height: 30px;     width: 100%; } 

so default placeholder removed , added abruptly in jquery ui, takes 1 place, adds new place no way add css animations or anything.

what did here replaced default placeholder our own can animate. iterate unique number each replacement placeholder created can have multiple existing @ once , animate them in , out more gradually.

hope helps! haven't tested in many browsers , there's better place global scope put 'placeholdernumber' variable.