jQuery UI可排序動畫

Question

我有一個類似網格的列表，並具有可排序的功能，就像計劃一樣。我想動畫每個項目，除了被操作的項目在列表中平滑滑動。我在這裏設置了一個例子：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> 

的CSS：

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

最後，JS：

$('#sort').sortable({ 

}); 

我如何動畫的元素來填充空間的轉變，而不僅僅是跳躍？

Answer 1

我是這樣做的：

// 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%; 
} 

所以默認的佔位符被刪除，在jQuery UI的加入非常突然，它只是需要從一個地方，它沒有辦法添加添加到新的地方CSS動畫或任何東西。

我們在這裏所做的就是將我們自己的默認佔位符替換爲我們可以製作的動畫。我們爲所創建的每個替換佔位符迭代一個唯一編號，以便我們可以同時存在多個替換佔位符，並逐漸對它們進行更多動畫處理。

希望這會有所幫助！沒有在許多瀏覽器中測試過，並且可能比全局範圍更好地放置'placeholderNumber'變量。

Answer 2

$（ '＃排序'）排序。（{ 還原：真 }）;

我認爲這會做魔術！