1

これが私の現在のコードです。これらのコードは親と子の両方を並べ替えますが、並べ替え後の子の新しい順序のみを表示します。

テンプレート

<div id="tree">
    <ul id="envelopes" class="dropcat cat-data">
        <li id="1">
            <span class="cat-title">Utilities</span>
            <ul class="dropenv mt">
                <li class="innerList">Electricity</li>
                <li class="innerList">Water</li>
                <li class="innerList">Trash</li>
                <li class="innerList">Television</li>
            </ul>
        </li>

        <li id="2">
            <span class="cat-title">Sample</span>
            <ul class="dropenv mt">
                <li class="innerList">Test</li>
            </ul>
        </li>

        <li id="3">
            <span class="cat-title">Saving</span>
            <ul class="dropenv mt">
                <li class="innerList">College Fund</li>
                <li class="innerList">Retirement Fund</li>
                <li class="innerList">Emergency Fund</li>
            </ul>
        </li>
    </ul>
</div>
<p id="cl"></p>

js

<script>
    var addPositions = function() {
        $('.dropenv, .dropcat').each(function() {
            var position = 0;
            $(this).children().each(function() {
                $(this).data('position', position);
                position++;
            });
        });
    };

    $(document).ready(function() {
        addPositions();
        var origTitle;
        var origColor;
        $(".dropenv").sortable({
            connectWith: "ul.mt",
            dropOnEmpty: true,
            start: function(event, ui) {
                origColor = ui.item.text();
                origTitle = ui.item.parent().siblings('.cat-title').text();
            },
            stop: function(event, ui) {
                var order = [];

                ui.item.closest('ul').children('li').each(function() {
                    order.push($(this).data('position'));
                    var c = $(this).text();
                    if (c === origColor) {
                        var z = origTitle;
                    } else {
                        var z = $(this).parent().siblings('.cat-title').text();
                    }
                    $("#cl").append(z + "_" + c + "<br /\>");
                });
            }
        });

        $( "ul.dropcat").sortable({
            connectWith: "ul.cat-data",
            dropOnEmpty: true,
        });
    });
</script>

親の新しい順序を取得するには?

例えば：

   Before:
      - Utilities
      - Sample
      - Saving

  //If I'm going to swap Saving to Utilities, it must be display the new order like this

   New Order:
      - Saving
      - Sample
      - Utilities

@Jack Shedd からの更新

をコピーするstopと、次の出力が得られます。

_ Utilities Electricity Water Natural Gas Home Phone Cell Phones Trash Television Internet
_ Charity/Giving Charitable Gifts Fast Offerings
_ Sample test
_ Recreation Entertainment Vacation
_ Saving College Fund Emergency Fund Retirement Fund

親のみを取得し、子を取得する方法は?

4

1 に答える 1

1

コードと質問に基づいて：

  1. オブジェクトにカスタムstopイベント ハンドラーがsortableあり、ユーザーがドラッグを停止した後、子の新しい位置を #cl 段落タグの innerHTML に追加します。
  2. なぜこれが子供には機能するのに、親には機能しないのか疑問に思っています。

jQuery を見ると、次の行が表示されます。

$(".dropenv").sortable({

これはsortable、 のクラスを持つ任意の要素に動作を適用しています.dropenv。ここでstop、#cl タグを更新するカスタム イベント ハンドラーを開始します。

ただし、この動作はクラスが の要素にのみ適用さ.dropenvれ、親の html を確認します。

<ul id="envelopes" class="dropcat cat-data">

親 UL が一致しません。

代わりに、まったく新しいsortable動作を親に適用しています。

    $( "ul.dropcat").sortable({
        connectWith: "ul.cat-data",
        dropOnEmpty: true,
    });

その中に含まれるカスタムstopハンドラー コードはありません。

したがって、stopハンドラー コードを.dropenvソート可能なオプションから上記のオプションにコピーするか、ソート可能なオプションをUL にも.dropenv適用します。.dropcat

于 2013-03-15T06:32:27.793 に答える