0

それぞれ Jquery UI タブ内に 2 つの接続されたリストがあります。リストをタブを介して接続して、 li要素を1つのulリストからタブ名にドラッグアンドドロップすると、li要素がターゲットulリストに追加されるようにしたいと思います。

タブ Jquery tutorial を介して接続リストを使用して JQuery である程度これを行うことができましたが、ドロップイベントで必要なコールバック関数を構築できませんでした。

コールバックは、(a) ドラッグ可能なアイテムの ID を識別し、(b) ドロップされたドロップ可能なタブに基づいてターゲット リストを識別し、(c) GET/POST を介して両方を PHP スクリプトに送信する必要があります。データベースの相互作用 (あるデータベース テーブルから別のデータベース テーブルへの項目の移動)。

これが私がこれまでに使用しているJQueryです（最初の部分はsortable1とsortable2の内部ソートを処理します）：

$(function() {
    $("#sortable1").sortable({
        items: 'li:not(.ui-state-disabled)',
        opacity: 0.6, 
        cursor: 'move', 
        connectWith: '.connectedSortable', 
        update: function() { 
            var order1 = $(this).sortable("serialize"); 
            $.get("updatedb.php?p=masterlist", order1, function(data){ 
            }); 
         },
      });

$("#sortable2").sortable({
    items: 'li:not(.ui-state-disabled)',
    opacity: 0.6, 
    cursor: 'move', 
    connectWith: '.connectedSortable', 
    update: function() { 
        var order2 = $(this).sortable("serialize"); 
        $.get("updatedb.php?p=offline", order2, function(data){ 
        }); 
     },
  });

var $tabs = $( "#tabs" ).tabs();

$("#tabs").droppable({
    accept: ".connectedSortable li",
    drop: function(ev, ui) {

    }             
});

(ドロップ イーブン コールバックは空です。これまでのところ、私の試みはどれも機能していません。)

リストの html 出力は次のとおりです。

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
    </ul>
    <div id="tabs-1">
        <ul id="sortable1" class="connectedSortable ui-helper-reset">
            <li class="ui-state-default">Item 1</li>
            <li class="ui-state-default">Item 2</li>
            <li class="ui-state-default">Item 3</li>
            <li class="ui-state-default">Item 4</li>
            <li class="ui-state-default">Item 5</li>
        </ul>
    </div>
    <div id="tabs-2">
        <ul id="sortable2" class="connectedSortable ui-helper-reset">
            <li class="ui-state-highlight">Item 1</li>
            <li class="ui-state-highlight">Item 2</li>
            <li class="ui-state-highlight">Item 3</li>
            <li class="ui-state-highlight">Item 4</li>
            <li class="ui-state-highlight">Item 5</li>
        </ul>
    </div>
</div>

この問題の助けをいただければ幸いです。ありがとう。

編集：

次のように解決しました。

    var $tab_items = $( "ul:first li", $tabs ).droppable({
        accept: ".connectedSortable li",
        hoverClass: "ui-state-hover",
        drop: function( event, ui ) {

            var $id = ui.draggable.attr('id');

            var $item = $( this );

            var $list = $( $item.find( "a" ).attr( "href" ) )
                .find( ".connectedSortable" );

            ui.draggable.hide( "fast", function() {
                $tabs.tabs( "select", $tab_items.index( $item ) );
                $( this ).appendTo( $list ).show( "fast" );
            });


            var $listname = $list.attr('id');

                $.get("tester.php", {list:$listname, id:$id}, function(data){ 

        }); 



        }
    });
});
4

1 に答える 1

0

優れたソリューション。私も、ドラッグされた要素の値を見つけるのに問題がありました。この問題に加えて、動的に生成された未知の数のリストを受け入れるソート可能な関数を持たなければなりませんでした。これは、この問題にアクセスする人々にとって役立つ場合があります。

var num_lists = $('[id^=tabs-]').length;
for(i=1;i<=num_lists;i++){
  $("#sortable"+i).sortable().disableSelection();
}
于 2011-08-04T21:52:59.057 に答える