jQuery可与动画排序 [英] jQuery Sortable with animation
问题描述
我使用jQuery和Sortable来排列我的项目列表（这个 http://dragsort.codeplex.com ）。
所有作品都非常完美。
我在 dragEnd 来排列列表。
这是我的代码：
$（＃list1，＃list2）。dragsort（{dragSelector：div，
dragBetween：true，
dragEnd：saveOrder，
placeHolderTemplate：< li class ='placeHolder'>< div>< / div>< / li>}）;
函数saveOrder（）{
var data = $（＃list1 li）。map（function（）{return $（this）.children（）。html（）;} ）。得到（）;
$（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 sortable触发更改事件时，我可以检测到原始 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 要求，以确保克隆的项目位于原始项目之下。请注意原始项目上的相对位置，以确保其按预期行事。为什么在你下面问？它将（希望）变得清晰与一些Javascript：
jQuery（function（）{
/ / $循环遍历原始项目...
jQuery（＃original_items li）。each（function（）{
//克隆原始项目使其
/ /绝对定位的对应...
var item = jQuery（this）;
var item_clone = item.clone（）;
//'存储'克隆供以后使用...
item.data（clone，item_clone）;
//设置克隆的初始位置
var position = item.position（）;
item_clone .css（left，position.left）;
item_clone.css（top，position.top）;
//附加克隆...
jQuery （#cloned_items）。append（item_clone）;
}）;
//像往常一样创建我们的排序...
//与一些事件处理程序。
jQuery（＃original_items）。sortable（{
//在排序st艺术，隐藏原始项目...
//只调整可见度，我们仍然需要
//他们的浮动位置..！
start：function（e，ui）{
//循环通过项目，除了我们
//当前拖动，并隐藏...
ui .helper.addClass（ 排除我）;
jQuery（＃original_items li：not（.exclude-me））
.css（visibility，hidden）;
//获取下面的克隆并隐藏它...
ui.helper.data（clone）。hide（）;
}，
stop：function（e，ui）{
//获取我们只是拖动的项，
//它的克隆，并相应调整...
jQuery（＃original_items li.exclude-me）。each（function（）{
var item = jQuery（this）;
var clone = item.data（克隆）;
var position = item.position（）;
//将克隆移动到我们刚刚删除的项目下...
clone.css（ left，position.left）;
clone.css（top，position.top）;
clone.show（）;
//删除不必要的类..
item.removeClass（exclude-me）;
}）;
//确保我们所有的原始项目再次可见...
jQuery（＃original_items li）。css（visibility，visible）;
}，
//这里是魔术发生的地方...
change：function（e，ui）{
//获取所有不可见的项目，不是占位符
//并且在订购更改时处理它们...
jQuery（＃original_items li：not（.exclude-me，.ui-sortable-placeholder））。each（function（） {
var item = jQuery（this）;
var clone = item.data（clone）;
//停止当前克隆动画...
clone.stop（true，false）;
//获取不可见的项目，它已经攫取到一个新的
//位置，获取其位置，并生成可见的
//克隆到它...
var position = item.position（）;
clone.animate（{
left：position.left，
top：position.top} ，500）;
}）;
}
}）;
}）;哇，我真的希望这是有道理的，有助于某人动画他们的排序列表，但这是一个工作。例如有兴趣的人！ ：）
I'm using jQuery and Sortable to arrange my list of items (and this http://dragsort.codeplex.com).
All works perfect.
I'm using a function on dragEnd to arrange the lists in order.
Here is my code:
$("#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("|"));
};
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.
One example is this:
http://www.youtube.com/watch?v=U3j7mM_JBNw
Look at the drag/drop (0:30) and you'll see what I'm talking about.
Thanks.
解决方案 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...
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.
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>
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;
}
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屋！
