1

我有两个这样的列表：

<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 但永远不会 1,2,3 因为项目编号 2 不会添加到该列表中（但它已添加并且存在于浏览器中，该更改不会被传播到 ajaxcall/保存脚本）

编辑：我认为这可能与 LI 元素的 ID 值有关，但我不知道如何以不同的方式进行操作 - 如果我将这些 ID 设置为 sortable_1（而不是 sortable2_1），它们会在序列化后生成一个大列表.

4

1 回答 1

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() {
                    ***
                });
            }
    });

我不知道这是您要寻找的答案，但希望对您有所帮助

于 2013-01-15T12:49:57.523 回答