1

私はそのような2つのリストを持っています:

<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 の 2 つの配列が得られることですが、項目を一方から他方に移動すると、そのスクリプトでは発生しません。アイテム番号2はそのリストに追加されないため、順序1,3または3,1でsortable2を使用できますが、1,2,3はできません(ただし、追加されてブラウザに存在し、その変更は伝播されません) ajaxcall/保存スクリプトへ)

編集: LI 要素の ID 値と関係があるのではないかと思いますが、別の方法がわかりません。それらの ID を (sortable2_1 ではなく) sortable_1 として持っている場合、シリアル化後に 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 に答える