聚会有点晚了，但我决定使用 jQuery 找到解决方案，因为在这个主题上几乎没有帮助，尤其是复制 Facebook 等网络应用程序中存在的功能及其相册的图像拖放重新排序，以及随之而来的漂亮动画......
所以我想出了一个似乎非常有效的解决方案，我会尽我所能解释它！来了……
这里最大的问题是不仅要为可排序对象设置动画，还要弄清楚它们需要动画到哪里——当涉及到像画廊中的图像这样的浮动元素时，这真是太棒了！为了解决这个问题，我决定.clone() 原始浮动LI 项目，使用小于原始@ 的z-index 值将克隆绝对定位在原始LI 项目之下 987654327@ 项目，然后当从 jQuery 可排序的 change 事件触发时，我可以检测到原始 LI 的位置并将绝对定位的克隆动画到这些位置。剩下的就是简单地适当地显示/隐藏元素以获得所需的效果。
这是代码，从 HTML 开始：
<ul id="original_items">
<li><img src="something.jpg" /></li>
<li><img src="something.jpg" /></li>
<li><img src="something.jpg" /></li>
</ul>
<ul id="cloned_items">
</ul>
所以我们有我们要排序的原始项目，以及克隆项目的容器。 CSS 的时间：
#original_items, #cloned_items {
list-style: none;
}
#original_items li {
float: left;
position: relative;
z-index: 5;
}
#cloned_items li {
position: absolute;
z-index: 1;
}
使用我们的 CSS，我们只是删除任何列表样式、浮动我们的原始元素并设置 z-index 要求以确保克隆的项目位于原始项目的下方。请注意原始项目上的 relative 位置，以确保它们的行为符合预期。为什么在下面问？它会（希望）通过一些 Javascript 变得清晰：
jQuery(function(){
// loop through the original items...
jQuery("#original_items li").each(function(){
// clone the original items to make their
// absolute-positioned counterparts...
var item = jQuery(this);
var item_clone = item.clone();
// 'store' the clone for later use...
item.data("clone", item_clone);
// set the initial position of the clone
var position = item.position();
item_clone.css("left", position.left);
item_clone.css("top", position.top);
// append the clone...
jQuery("#cloned_items").append(item_clone);
});
// create our sortable as usual...
// with some event handler extras...
jQuery("#original_items").sortable({
// on sorting start, hide the original items...
// only adjust the visibility, we still need
// their float positions..!
start: function(e, ui){
// loop through the items, except the one we're
// currently dragging, and hide it...
ui.helper.addClass("exclude-me");
jQuery("#original_items li:not(.exclude-me)")
.css("visibility", "hidden");
// get the clone that's under it and hide it...
ui.helper.data("clone").hide();
},
stop: function(e, ui){
// get the item we were just dragging, and
// its clone, and adjust accordingly...
jQuery("#original_items li.exclude-me").each(function(){
var item = jQuery(this);
var clone = item.data("clone");
var position = item.position();
// move the clone under the item we've just dropped...
clone.css("left", position.left);
clone.css("top", position.top);
clone.show();
// remove unnecessary class...
item.removeClass("exclude-me");
});
// make sure all our original items are visible again...
jQuery("#original_items li").css("visibility", "visible");
},
// here's where the magic happens...
change: function(e, ui){
// get all invisible items that are also not placeholders
// and process them when ordering changes...
jQuery("#original_items li:not(.exclude-me, .ui-sortable-placeholder)").each(function(){
var item = jQuery(this);
var clone = item.data("clone");
// stop current clone animations...
clone.stop(true, false);
// get the invisible item, which has snapped to a new
// location, get its position, and animate the visible
// clone to it...
var position = item.position();
clone.animate({
left: position.left,
top:position.top}, 500);
});
}
});
});
哇，我真的希望这是有道理的，并且可以帮助某人制作可排序列表的动画，但对于任何感兴趣的人来说，这都是一个可行的示例！ :)