jQuery 可排序 - 在列表之间移动项目有效，但不会传播

Question

我有两个这样的列表:

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-default ui-corner-all" id="sortable2_1">Martin</li>
  <li class="ui-state-default ui-corner-all" id="sortable2_3">Mirek</li>
</ul>
<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default ui-corner-all" id="sortable1_2">Karel</li>
</ul>

我有这个jquery代码:

$( "#sortable1, #sortable2, #sortable0" ).sortable({
        connectWith: ".connectedSortable",
        /**/update : function(){
            $.ajax({
                type: "POST",  
                url: "somescript.php",  
                data: 
                {
                data:$("#sortable1").sortable('serialize')+'&'+$("#sortable2").sortable('serialize')
                }, 
                timeout: 50000,
                async: true,
                cache: false
            });
        }/**/
    }).disableSelection();

我的问题是，当它发送到脚本，我得到两个数组，sortable1和sortable2，但如果我移动项目从一个到另一个，它不会发生在该脚本。我可以有排序为1,3或3,1的sortable2，但从来没有1,2,3，因为项目2不会被添加到该列表(但它是添加的，是在浏览器中，改变只是没有得到传播到ajaxcall/保存脚本)

EDIT:我认为它可能与LI元素的ID值有关，但我不知道如何做它不同-如果我将这些ID作为sortable_1(而不是sortable2_1)，它们在序列化后生成一个大列表

Answer 1

我知道当你在列表中拖动项目时，会有一些奇怪的事情。

当我遇到这个问题时，我解决它的方法是复制项目并删除旧的…我知道这对我很有帮助。

    //create list items draggagble
    $(".draggableItem").draggable({
        revert: true  //an effect if dropped outside drop zone
    });
    //create lists droppable
    $("ul").sortable({
        cursor: 'pointer'
    }).droppable({
            tolerance: 'pointer',
            drop: function(ev, ui) {
                //copy list item
                var $li = $('<li>').html(ui.draggable.html()).addClass($(ui.draggable).attr("class")).attr("rel", $(ui.draggable).attr("rel"));
                $li.draggable({revert: true});
                $li.appendTo(this);
                //delete old list item
                $(ui.draggable).remove();
                //execute ajax call
                $.ajax({
                    type: ***,
                    url: ***,
                    data: { *** }
                }).done(function() {
                    ***
                });
            }
    });

我不知道这是你想要的答案，但我希望它能帮助你