jQuery UI Sortierbare Animationen

Question

Ich habe eine gitterartige Liste und habe die sortierbare Funktionalität, wie geplant, darin zu arbeiten. Ich möchte jeden Gegenstand außer demjenigen animieren, der manipuliert wird, um glatt in die Liste zu gleiten. Ich habe hier ein Beispiel eingerichtet: 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> 

Die CSS:

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

Und schließlich die JS:

$('#sort').sortable({ 

}); 

Wie kann ich die Elemente animieren, anstatt nur in den Raum mit Übergängen zu füllen springen?

Answer 1

Hier ist, wie ich es tat:

// needed to allow for multiple placeholders as they 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 the drag, add our replacement placeholder. We set the height of the default placeholder to 30px (see css below), so the replacement needs to be that same height and the original gets a negative margin of that height and our replacement consumes the 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, and animate in new one, but only if a little delay has passed to avoid crazy jank town. 
     if ($(ui.item).parent().hasClass('delayPlaceholderMovement') == false) { 
      // If the parent doesn't have the 'delay' class, proceed to animating away the current placeholder. 
      $('.temp-spacer-' + placeholderNumber).animate({ 
       height: "0px" 
      }, 200, function() { 
       $(this).remove(); 
      }); 
      // iterate the placeholder number to keep old and new ones separated. 
      placeholderNumber = placeholderNumber + 1; 

      // add and animate in the new location placeholder. 
      $(ui.placeholder).before('<div style="height:0px;" class="temp-spacer-' + placeholderNumber + '"></div>'); 
      $('.temp-spacer-' + placeholderNumber).animate({ 
       height: "30px" 
      }, 200); 
     }; 
     // add the 'delay' class to the parent 
     $(ui.item).parent().addClass('delayPlaceholderMovement'); 
     // and set a timeout to remove the parent after 40ms 
     window.setTimeout(function() { 
      $(ui.item).parent().removeClass('delayPlaceholderMovement'); 
     }, 40); 
    }, 
    stop: function(event, ui) { 
     // remove our fake placeholder and strip the regular placeholders negative margin. 
     $('.temp-spacer-' + placeholderNumber).css('height', 0).remove(); 
     $(ui.placeholder).css('margin-top', '0px'); 
     // clear placeholder number so this doesn't go a bagillions after performing a few dragg events. 
     placeholderNumber = 0; 
    } 
}); 


// CSS: 
// Setting the height of the default placeholder. If you want to style the placeholder, you'd probably set an additional class on our replacement animated placeholder. 
.tree-drop-placeholder { 
    height: 30px; 
    width: 100%; 
} 

So ist die Standard Platzhalter entfernt und hinzugefügt sehr abrupt in jQuery UI, es dauert nur es von einem Ort, fügt sie an den neuen Ort mit keiner Weise hinzufügen CSS-Animationen oder irgendetwas.

Was wir hier getan haben, wurde der Standardplatzhalter durch unseren eigenen ersetzt, den wir animieren können. Wir wiederholen eine eindeutige Nummer für jeden ersetzten Platzhalter, so dass mehrere gleichzeitig vorhanden sein können und schrittweise animiert werden können.

Hoffe, das hilft! Habe es nicht in vielen Browsern getestet und es gibt wahrscheinlich einen besseren Ort als den globalen Bereich, um die 'placeholderNumber' Variable zu setzen.

Answer 2

$ ('# sort') sortierbar. ({ revert: true });

Ich denke, das wird die Magie tun !!!