1

だから私は解決しようとしている問題を抱えていますが、オンラインで答えが（まだ）見つかっていません...だから、検索を続けている間、誰かが何らかの洞察を提供できるかどうかを尋ねてみようと思いました...私は次のように2つのソート可能なリストを持っています:

リスト1

  • リスト 1 アイテム 1 < 削除アイコン >
  • リスト1項目2 <削除アイコン>
  • リスト 1 アイテム 3 < 削除アイコン >

リスト 2

  • リスト 2 項目 1
  • リスト 2 項目 2
  • リスト 2 項目 3

詳細: リスト 2 は、「connectWith:」オプションを使用してリスト 1 に接続されています。つまり、リスト 2 のアイテムをリスト 1 にドラッグすることのみを許可していますが、その逆は許可していません。上記の設定で示したように、リスト 1 の項目には削除アイコンがあり、リスト 1 に追加された項目を削除できます。リスト 2 の項目がリスト 1 にドラッグされると、この削除アイコンを追加します。ドラッグしたアイテムを削除する機能も。

問題: ここで問題が発生します。リスト 1 の削除アイコンをクリックして、リスト 2 から最初に取得したアイテムを削除した場合、そのアイテムをリスト 2 に復元したいと思います。「キャンセル」オプションを使用してみました。ただし、それは最後にドラッグ/ドロップされたアイテムのみを復元します。

シナリオ: リスト 1

  • リスト 1 アイテム 1 < 削除アイコン >
  • リスト1項目2 <削除アイコン>
  • リスト 1 アイテム 3 < 削除アイコン >
  • リスト2項目1 <削除アイコン>
  • リスト2項目2 <削除アイコン>

リスト 2 のアイテム 1 の削除アイコンをクリックすると、リスト 2 のアイテム 1 だけがリスト 2 に復元され、リスト 2 のアイテム 2 はリスト 1 にそのまま保持されます...

HTML:

<ul id="cur-dist-list">
<li class="ui-state-default">List 1 Item 1 <a href="#" class="ui-icon ui-icon-trash" style="display:inline-block;"></a></li>
<li class="ui-state-default">List 1 Item 2 <a href="#" class="ui-icon ui-icon-trash" style="display:inline-block;"></a></li>
<li class="ui-state-default">List 1 Item 3 <a href="#" class="ui-icon ui-icon-trash" style="display:inline-block;"></a></li>
<li class="ui-state-default">List 1 Item 4 <a href="#" class="ui-icon ui-icon-trash" style="display:inline-block;"></a></li>
<li class="ui-state-default">List 1 Item 5 <a href="#" class="ui-icon ui-icon-trash" style="display:inline-block;"></a></li>
</ul><br /><br />
<ul id="prev-dist-list">
<li class="ui-state-default">List 2 Item 1</li>
<li class="ui-state-default">List 2 Item 2</li>
<li class="ui-state-default">List 2 Item 3</li>
<li class="ui-state-default">List 2 Item 4</li>
<li class="ui-state-default">List 2 Item 5</li>
</ul><br /><br />
<button id="doc-dist-submit-button" style="cursor:pointer;">Submit</button>

Javascript:

$("#doc-dist-submit-button").button();
    $("#cur-dist-list").sortable({
        dropOnEmpty: true,
        receive: function(event, ui) {
            var dropElemTxt = $(ui.item).text();

$(ui.item).replaceWith('<li class="ui-state-default prev-prov">' + dropElemTxt + 
'<a href="#" id="remove-prov-' + ($("#cur-dist-list li").size()) + '" class="ui-icon ui-icon-trash" style="display:inline-block;"></a></li>');
        },
        placeholder: {
            element: function(currentItem, ui) {
                return $('<li class="selected">' + currentItem[0].innerHTML + '</li>');
            },
            update: function(container, p) {
                return;
            }
        }
    }).disableSelection();

    $("#cur-dist-list").on("click", "a", function(){

        $(this).parent("li").remove();

        if($(this).parent("li").hasClass("prev-prov")){
            $("#prev-dist-list").sortable('cancel');
        }
    });

    $("#prev-dist-list").sortable({
        connectWith: "#cur-dist-list",
        placeholder: {
            element: function(currentItem, ui) {
                return $('<li class="selected">' + currentItem[0].innerHTML + '</li>');
            },
            update: function(container, p) {
                return;
            }
        }
    }).disableSelection();
4

2 に答える 2

0

今のところ、これは私がしていることです：

$("#prev-dist-list").append('<li class="ui-state-default">' + $(this).parent("li").text() + '</li>');

アイコンのクリックイベントでは、これはうまくいくようです。今は、適切な場所でアイテムを注文するだけです

于 2013-10-29T19:12:58.610 に答える