1

アプリに3つの列があります。各列には順序付けられていないリストがあります。Nestableを使用して、リストアイテムをリスト間でドラッグアンドドロップしています。マークアップは次のとおりです。

<div class="row-fluid span12">
  <div class="cf nestable-lists">
   <div id="pjax-content">
    <div class="span4">
        <div class="dd" id="nestable1">
            <ul class="dd-list">
                <li class="dd-item dd3-item" data-id="123">
                    <div class="dd-handle dd3-handle">Drag</div>
                    <div class="dd3-content">
                        // list content
                    </div>
                </li>
                <li class="dd-item dd3-item" data-id="456">
                    <div class="dd-handle dd3-handle">Drag</div>
                    <div class="dd3-content">
                        // list content
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <div class="span4">
        <div class="dd" id="nestable2">
            <ul class="dd-list">
                <li class="dd-item dd3-item" data-id="789">
                    <div class="dd-handle dd3-handle">Drag</div>
                    <div class="dd3-content">
                        // list content
                    </div>
                </li>
                <li class="dd-item dd3-item" data-id="1011">
                    <div class="dd-handle dd3-handle">Drag</div>
                    <div class="dd3-content">
                        // list content
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <div class="span4">
        <div class="dd" id="nestable3">
            <ul class="dd-list">
                <li class="dd-item dd3-item" data-id="1213">
                    <div class="dd-handle dd3-handle">Drag</div>
                    <div class="dd3-content">
                        // list content
                    </div>
                </li>
                <li class="dd-item dd3-item" data-id="1415">
                    <div class="dd-handle dd3-handle">Drag</div>
                    <div class="dd3-content">
                        // list content
                    </div>
                </li>
            </ul>
        </div>

    </div>
  </div>
 </div>
</div>

これは機能し、各リスト間でリストアイテムをドラッグアンドドロップできます。問題は、PJAXを実装するときです。

PJAXを使用してURLを変更するリンクがいくつかあります。つまり、各リンクは、URLに基​​づいて各リストのデータまたはデータの順序を更新します。データはそれに応じてid="pjax-content"内で更新されるため、機能します。これは、サーバー側コードのスニペットです（CIを使用）。

if (isset($_SERVER["HTTP_X_PJAX"])) {

        echo $data['contents'];

    } else {

        // construct views when not PJAX    
    }

$ data ['contents']には、htmlが文字列として含まれています。

私も次のJSライブラリを持っています（私はこれらのいくつかを削除しようとしましたが、問題はまだ存在します）：

<script type="text/javascript" src="jquery-1.9.0.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>

<script type="text/javascript" src="nestable.js"></script>
<script type="text/javascript" src="nestable-settings.js"></script>
<script type="text/javascript" src="bootstrap-editable.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src='jquery.pjax.js'></script>
<script type="text/javascript">

   $(document).pjax('[data-pjax] a, a[data-pjax]', '#pjax-content');
    $(document).on('pjax:send', function() {
      console.log("before send");
    });
    $(document).on('pjax:complete', function() {
      console.log("done!");
    });

</script>

問題

PJAXが機能するリンクの1つをクリックすると、データが更新され、ページが再読み込みされず、送信および完了前にコンソールが表示されます。これですべてが正常になります。ただし、ネスト可能なアイテムは選択できなくなったため、ドラッグアンドドロップできません。ページ全体を更新すると、それが機能し、ドラッグアンドドロップできます。

マークアップの前後を比較しましたが（前号でした）、すべて同じです。

私がどこで間違っているのかについての提案はありますか？または、これを最適にデバッグする方法は？

4

1 に答える 1

3

ajaxの完全な機能の後にnestableを呼び出す

  $(document).on('pjax:complete', function() {
   $('#nestable1,#nestable2,#nestable3').nestable();
  });
于 2013-02-07T09:01:23.540 に答える