可通过动画进行排序的jQuery
可通过动画进行排序的jQuery
提问于 2011-02-21 05:57:50
我使用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)，你就会明白我在说什么。
谢谢。
回答 4
Stack Overflow用户
发布于 2013-03-16 17:54:02
刚刚实现了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);
});
}
});Stack Overflow用户
发布于 2011-02-22 21:34:22
你为什么不在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：
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ul>Stack Overflow用户
发布于 2012-02-16 01:31:07
来自上面的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);
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5060357
复制相关文章
相似问题