jQuery可以使用动画进行排序

我正在使用jQuery和Sortable来安排我的项目列表（以及这个http://dragsort.codeplex.com ）。

一切都很完美。

我正在使用dragEnd上的函数按dragEnd排列列表。

这是我的代码：

 $("#list1, #list2").dragsort({ dragSelector: "div", dragBetween: true, dragEnd: saveOrder, placeHolderTemplate: "
" }); function saveOrder() { var data = $("#list1 li").map(function() { return $(this).children().html(); }).get(); $("input[name=list1SortOrder]").val(data.join("|")); }; 

我的问题：无论如何我在拖动时可以动画吗？ 或拖动时重新定位元素？ 我只需要它在Safari上工作。

一个例子是：

看看拖放（0:30），你会看到我在说什么。

谢谢。

Answer 1

派对有点晚了，但我决定用jQuery获得一个解决方案，因为在这个主题上几乎没有什么帮助，特别是复制Facebook等网络应用程序上存在的function及其专辑的图片拖放重新排序，以及与之相伴的漂亮动画……

所以我想出了一个似乎非常好的解决方案，我会尽我所能来解释它！ 开始…

这里最大的问题是不仅要为sortables制作动画，而且要弄清楚它们需要动画的位置 – 这对于像画廊中的图像这样的浮动元素来说太棒了！ 为了解决这个问题，我决定.clone()原始的浮动LI项目，使用小于原始LI项目的z-index值将克隆绝对置于原始LI项目下，然后当change事件从jQuery sortable我可以检测到原始LI的位置，并将绝对定位的克隆设置为那些位置的动画。 剩下的就是简单地显示/隐藏元素以获得所需的效果。

这是代码，从HTML开始：

因此，我们有我们尝试排序的原始项目，以及克隆项目的容器。 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); }); } }); }); 

哇，我真的希望这有意义，并帮助有人为他们的可排序列表设置动画，但对于任何有兴趣的人来说，这都是一个有效的例子！ 🙂

Answer 2

刚刚实现了Chris Kempen所说的： http ： //jsfiddle.net/dNfsJ/

 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); }); } }); 

Answer 3

虽然此解决方案可以很好地创建初始转换，但当项目快照恢复时，没有转换。 解决方案比我想象的要容易。 您需要做的就是调整.sortable（）中的恢复选项

像这样：

jQuery UI API： http ： //api.jqueryui.com/sortable/#option-revert

这样可以很好地平滑过渡到物品的新家。

点击这里查看jsFiddle的例子

Answer 4

从上面的jsfiddle回答（ http://jsfiddle.net/KgNCD/2/ ）：

 $( "#sortable" ).sortable({ start: function(e, ui){ $(ui.placeholder).hide(300); }, change: function (e,ui){ $(ui.placeholder).hide().show(300); } }); 

Answer 5

你为什么不在jqueryui上使用Sortable？ http://jsfiddle.net/KgNCD/

JS：

 $( "#sortable" ).sortable({ start: function(e, ui){ $(ui.placeholder).hide(300); }, change: function (e,ui){ $(ui.placeholder).hide().show(300); } }); $("#sortable").disableSelection(); 

HTML：

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