javascript - jquery中带索引的动画元素

Question

我想用点击事件交换可排序容器中的两个元素，但我不能这样做。

http://jsfiddle.net/prince4prodigy/rvfYE/

$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
$('#click').bind('click', function(){
    $('#li-3').animate({index:0},500);
    $('#li-1').animate({index:2},500);
});

Answer 1

animate方法不识别index属性，该方法主要用于处理数字 CSS 属性和其他一些特定属性，但是您可以使用prepend和insertAfter方法更改元素的位置：

var $sortable = $("#sortable").sortable();
$sortable.disableSelection();
$('#click').on('click', function () {
    $('#li-1').insertAfter($sortable.children().eq(1));
    $('#li-3').prependTo($sortable);
}); 

http://jsfiddle.net/9uKTY/

另一种使用slideDown和slideUp方法：

$('#click').bind('click', function () {
    $('#li-1').slideUp(400, function () {
        $(this).insertAfter($sortable.children().eq(2)).slideDown(400);
    });
    $('#li-3').slideUp(400, function () {
        $(this).prependTo($sortable).slideDown(400);
    });
});

http://jsfiddle.net/wwh2D/

Answer 2

正如我在上面的评论中所说：

$(function(){
$("li").click(function(){
    //have we clicked on the same item ?
    if($(this).hasClass("clicked")){
        $(this).removeClass("clicked");
     }
    // is there an element that allready have been clicked
     else{
         var firstClicked = $(".clicked");
         //if no, this the first clicked element
         if(typeof firstClicked == undefined){
             $(this).addClass("clicked");
         }
         else{
          swap()....//do your stuff to swapp the elements
         }
});

});