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，但如果我将项目从一个移动到另一个，它将不会在该脚本中。我可以将sortable2与订单1,3或3,1但从不1,2,3，因为项目编号2不会被添加到该列表中（但它被添加并且在浏览器中，这些更改不会被传播到ajaxcall /保存脚本）

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

Answer 1

我知道在列表中拖动项目时会有些奇怪。

当我遇到这个问题时，我解决了bij复制项目并删除旧项目......我知道这对我的情况有帮助。

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

我不知道这是你正在寻找的答案，但我希望它有所帮助

jquery sortable - 在列表之间移动项目但不会传播

1 个答案: