我正在使用jQuery和Sortable排列我的项目列表(和
http://dragsort.codeplex.com)。
所有作品完美。
我在dragEnd上使用一个函数来排列列表。
这是我的代码：
$("#list1,#list2").dragsort({ dragSelector: "div",dragBetween: true,dragEnd: saveOrder,placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });
function saveOrder() {
var data = $("#list1 li").map(function() { return $(this).children().html(); }).get();
$("input[name=list1SortOrder]").val(data.join("|"));
};
我的问题：还有，我拖曳时可以做动画吗？还是拖动元素？我只需要它在Safari上工作。
一个例子是这样的：
http://www.youtube.com/watch?v=U3j7mM_JBNw
看看拖放(0:30)，你会看到我在说什么。
谢谢。
解决方法
有一点晚到派对，但我决心使用jQuery获得解决方案，因为对此主题的帮助很少，特别是复制了像Facebook这样的网络应用程序和他们的相册的图像拖放重新排序的功能，和漂亮的动画，伴随着…
所以我想出了一个似乎工作得很好的解决方案，我会尽我所能地解释它的能力！开始…
这里最大的问题是不仅可以对可排序性进行动画，还要弄清楚他们需要在哪里可以动画化，当涉及浮动元素，如画廊中的图像！为了解决这个问题，我决定把.clone()原来的浮动LI项目，使用小于原来的LI项目的z-index值，将克隆绝对放在原来的LI项下，然后当更改事件从jQuery可以排序，我可以检测到原始的位置，并将绝对定位的克隆放在这些位置上。其余的只是简单地显示/隐藏元素以获得所需的效果。
这是代码，从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要求，以确保克隆的项目位于原始项目的下方。请注意原始项目的相对位置，以确保其按预期方式运行。为什么你问下面？它将(希望)变得清楚与一些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);
});
}
});
});
哇，我真的希望这是有道理的，有助于某人动画他们的排序列表，但这是一个有兴趣的人的工作示例！ 原文链接：https://www.f2er.com/jquery/182328.html
