是否有一些jQuery代码可以用动画交换2组元素?
我才发现 Move list item to top of unordered list using jQuery但它太有限了(只有滑动元素到顶部而不考虑不同的边距)。答案 0 :(得分:5)
请参阅此fiddle。支持任意边框,边距,填充,大小等,动画结束时仍然没有跳转。
function slideSwap($set1, $set2) {
//$elem.append(infoString($elem));
//$after.append(infoString($after));
$set1.css("color", "red");
$set2.css("color", "blue");
var $set3 = $set2.last().nextAll();
$set3.css("color", "green");
var mb_prev = cssprop($set1.first().prev(), "margin-bottom");
if (isNaN(mb_prev)) mb_prev = 0;
var mt_next = cssprop($set2.last().next(), "margin-top");
if (isNaN(mt_next)) mt_next = 0;
var mt_1 = cssprop($set1.first(), "margin-top");
var mb_1 = cssprop($set1.last(), "margin-bottom");
var mt_2 = cssprop($set2.first(), "margin-top");
var mb_2 = cssprop($set2.last(), "margin-bottom");
var h1 = $set1.last().offset().top + $set1.last().outerHeight() - $set1.first().offset().top;
var h2 = $set2.last().offset().top + $set2.last().outerHeight() - $set2.first().offset().top;
move1 = h2 + Math.max(mb_2, mt_1) + Math.max(mb_prev, mt_2) - Math.max(mb_prev, mt_1);
move2 = -h1 - Math.max(mb_1, mt_2) - Math.max(mb_prev, mt_1) + Math.max(mb_prev, mt_2);
move3 = move1 + $set1.first().offset().top + h1 - $set2.first().offset().top - h2 +
Math.max(mb_1,mt_next) - Math.max(mb_2,mt_next);
// let's move stuff
$set1.css('position', 'relative');
$set2.css('position', 'relative');
$set3.css('position', 'relative');
$set1.animate({'top': move1}, {duration: 1000});
$set3.animate({'top': move3}, {duration: 500});
$set2.animate({'top': move2}, {duration: 1000, complete: function() {
// rearrange the DOM and restore positioning when we're done moving
$set1.insertAfter($set2.last())
$set1.css({'position': 'static', 'top': 0});
$set2.css({'position': 'static', 'top': 0});
$set3.css({'position': 'static', 'top': 0});
}
});
}
答案 1 :(得分:2)
甚至更好,使用Quicksand
答案 2 :(得分:0)
看到这个小提琴:http://jsfiddle.net/maniator/26UNk/
$("#content ul").sortable({
opacity: 0.6,
cursor: 'move',
update: function() {
var order = $(this).sortable("serialize") + '&action=updateRecordsListings';
$.post("updateDB.php", order, function(theResponse) {
$("#response").html(theResponse);
});
}
});
这可能有所帮助(它确实有一个拖动元素)
答案 3 :(得分:0)
现在有一个jQuery插件可以做,我还没有尝试过,但是演示似乎运行得很好:http://biostall.com/swap-and-re-order-divs-smoothly-using-jquery-swapsie-plugin