Question

我希望在可排序容器中使用click事件交换两个元素，但我不能这样做。

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
         }
});

}）;

在jquery中具有索引的animate元素

2 个答案: