带有动画的 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屋！
