jQuery 可排序动画 [英] jQuery Sortable with animation
问题描述
我正在使用 jQuery 和 Sortable 来安排我的项目列表(还有这个 http://dragsort.codeplex.com).
I'm using jQuery and Sortable to arrange my list of items (and this http://dragsort.codeplex.com).
一切正常.
我正在使用 dragEnd 上的函数来按顺序排列列表.
I'm using a function on dragEnd to arrange the lists in order.
这是我的代码:
$("#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 上工作.
My question: Is there anyway that I can do an animation while I'm dragging? Or reposition the elements while dragging? I just need it to work on Safari.
一个例子是这样的:
http://www.youtube.com/watch?v=U3j7mM_JBNw
看看拖/放(0:30)，你就会明白我在说什么.
Look at the drag/drop (0:30) and you'll see what I'm talking about.
谢谢.
推荐答案
参加聚会有点晚，但我决定使用 jQuery 获得解决方案，因为在这个主题上几乎没有帮助，尤其是复制功能存在于 Facebook 等网络应用程序中，通过拖放来重新排序他们相册的图像，以及随之而来的漂亮动画......
A bit late to the party, but I was determined to get a solution going with jQuery as there was very little help on this topic, especially replicating the functionality that exists on web apps like Facebook and their albums' images dragging and dropping to reorder, and the pretty animations that go along with that...
所以我想出了一个似乎非常有效的解决方案，我会尽我所能解释它！来了……
So I've come up with a solution that seems to work pretty great, and I'll do my best to explain it to the best of my abilities! Here goes...
这里最大的问题是不仅要为可排序对象设置动画，还要弄清楚它们需要设置动画的位置——对于像画廊中的图像这样的浮动元素来说太棒了！为了解决这个问题，我决定 .clone() 原始浮动 LI 项目，将克隆定位在 原始 LI 之下 项使用小于原始 LI 项的 z-index 值，然后当 change 事件从jQuery sortable 我可以检测原始 LI 的位置并将绝对定位的克隆动画到这些位置.剩下的就是简单地适当地显示/隐藏元素以获得所需的效果.
The biggest problem here was to not only animate the sortables, but to figure out where they needed to animate to - fantastic when it comes to floating elements like images in a gallery! To get around this, I decided to .clone() the original floating LI items, position the clones absolutely under the original LI items using a z-index value that was less than the original LI items, and then when the change event fired from the jQuery sortable I could detect the position of the original LI and animate the absolutely positioned clones to those positions. The rest was to simply show / hide elements appropriately to get the desired effect.
这是代码，从 HTML 开始:
Here's the code, starting with the 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时间:
So we have the original items we're trying to sort, and a container for the cloned items. Time for the 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 变得清晰:
With our CSS, we're just removing any list styling, floating our original elements, and setting up the z-index requirements to ensure the cloned items lie underneath the original items. Note the relative position on the original items to make sure they behave as expected. Why underneath you ask? It will (hopefully) become clear with some 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);
});
}
});
});
哇，我真的希望这是有道理的，并帮助人们为他们的可排序列表制作动画，但对于任何感兴趣的人来说，这是一个工作示例！:)
Wow, I really hope this makes sense and helps someone animate their sortable lists, but this is a working example for anyone who's interested! :)
这篇关于jQuery 可排序动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
