0 
    $(document).ready(function() {

   $("#test-list").sortable({ 
        items: "> li", 
        handle : '.handle', 
        axis: 'y', 
        opacity: 0.6, 
        update : function () { 
            var order = $('#test-list').sortable('serialize'); 
            $("#info").load("process-sortable.asp?"+order+"&id=catid&order=orderid&table=tblCats"); 
        } 
    }); 
    $("#test-sub").sortable({ 
        containment: "ul", 
        items: "li", 
        handle : '.handle2', 
        axis: 'y', 
        opacity: 0.6, 
        update : function () { 
            var order = $('ul').sortable('serialize'); 
            $("#info").load("process-sortable.asp?"+order+"&id=catid&order=orderid&table=tblCats"); 
        } 
    }); 

});

<ul id="test-list">
  <li id="listItem_10">first<img align="middle" src="Themes/arrow.png" class="handle" /></li>
  <li id="listItem_8">second<img align="middle" src="Themes/arrow.png" class="handle" />
    <ul id="test-sub">
      <li id="listItem_4"><img align="middle" src="Themes/arrow.png" class="handle2" /></li>
      <li id="listItem_3"><img align="middle" src="Themes/arrow.png" class="handle2" /></li>
        <ul id="test-sub">
          <li id="listItem_9"><img align="middle" src="Themes/arrow.png" class="handle2" /></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

私が抱えている問題:

  1. メインulのソートは機能していますが、常にではありません-私はそれを自分で修正しようとしますが、プロセスソート可能なコードではなく、ここのコードに問題がある場合は教えてください.
  2. メイン ul で li を移動することは問題ありませんが、サブまたはサブのサブに問題があります - あるサブからそのサブに、またはその逆に何かをドラッグできます - 私はそれが起こってほしくない.
  3. li をドラッグできるようにしたいのですが、この ul グループのみが proccess-sortable に送信して更新するものを選択することで、ドラッグしている li の特定の ul をキャッチするにはどうすればよいですか?
4

1 に答える 1

0

私が最初に目にするのは、複数のULに同じIDを指定し、実際にはマザーuLに並べ替え可能を設定するだけでよいということです。変更などの並べ替え可能なイベントのいずれかを使用して、移動したliのulを処理できます。ロードプロセス

編集：詳細情報を追加

さて、私は戻って、ネストされたソート可能オブジェクトに対して何をしたかを確認しました。また、ネストされたソート可能オブジェクトの背後で使用されたものは、ui.coreを必要としますが、やりたいことを実行します。次に、serialize_listを使用して、データをシリアル化してサーバーに戻しました。最高だとは言わないが、それが私がやった方法だ。

もう一度編集 してくださいここに私があなたのコードで見つけたものがあります私はそれをコメントしただけで何も変更しませんでした

  $(document).ready(function() {
    $("#test-list").sortable({
      items: "> li", // this is wrong should be "li"
      handle : '.handle',
      axis: 'y',
      opacity: 0.6,
      update : function () {
        var order = $('#test-list').sortable('serialize');
        $("#info").load("process-sortable.asp?"+order+"&id=catid&order=orderid&table=tblCats");
      }
    });


    $("#test-sub").sortable({ // this should be a class so that you can target multiple items
      containment: "ul",
      items: "li",
      handle : '.handle2',
      axis: 'y',
      opacity: 0.6,
      update : function () {
        var order = $('ul').sortable('serialize'); // this say get all ul items it should probably target $(this).closest('ul);
        $("#info").load("process-sortable.asp?"+order+"&id=catid&order=orderid&table=tblCats");
        }
    });
  });

次に、HTMLを調べて、重複するIDがなく、ネストがオフになっていることを確認する必要があります。さらに、listitem_4で引用符が欠落していることも確認してください。

投稿する前に時間をかけてHTMLを確認してください。多くの場合、w3のバリデーターを使用する必要があります。

于 2010-03-25T20:33:50.337 に答える