0

「章」を移動する方法を作成しようとしています。私の問題は、どのように頭を動かすことができないかということです。あなたの誰かがそれをどのように行ったかのアイデアや例を持っているなら、それは素晴らしいことです.

リストのようなものを考えていました。「章」をドラッグまたはクリックできる場所。

このような：

  • 第一章
    • チャプターAa
      • チャプターあああ
      • 章アーブ
    • 章アブ
  • 第二章
    • チャプターBb
  • 第C章

問題は、上下に移動するためのボタンだけがある場合、A から C の章に移動するときに追加のボタンが必要になることです。

PS: プロジェクトは にあり.cshtmlます。

編集: 各子チャプターには、その親の ID を保持する値があります。この ID は移動すると変更され、ユーザーが現在の注文に満足すると保存されます。

4

2 に答える 2

1

jQuery UI には、「ソート可能」と呼ばれるこのための優れたウィジェットがあります。 これは、あなたが探していると私が思うことを行う作業中のjsfiddleです。並べ替え可能なリストと接続されたリストの例を使用してください。

<ul class="sortable">
  <li class="ui-state-default">Chapter 1</li>
  <li class="ui-state-default">Chapter 2</li>
  <li class="ui-state-default">Chapter 3
      <ul class="sortable">
          <li class="ui-state-default">Chapter 3a</li>   
          <li class="ui-state-default">Chapter 3b</li>
          <li class="ui-state-default">Chapter 3c</li>
      </ul>          
  </li>
  <li class="ui-state-default">Chapter 4
    <ul class="sortable">
          <li class="ui-state-default">Chapter 4a</li>   
          <li class="ui-state-default">Chapter 4b</li>
          <li class="ui-state-default">Chapter 4c</li>
      </ul> 
 </li>
  <li class="ui-state-default">Chapter 5</li>
</ul>

$(function() {
    $( ".sortable" ).sortable({
      revert: true,
      connectWith: ".sortable"
    });

    $( "ul, li" ).disableSelection();
  });
于 2013-10-02T20:55:33.973 に答える
1

単純に要素を並べ替えるための再利用可能な並べ替えウィジェットを用意し、3 つ (この場合) を用意することをお勧めします。1 つはチャプター用、1 つはセクション用、もう 1 つはサブセクション用です。現在選択されているものに基づいて、対応するウィジェットを表示および非表示にすることができます。

さらに、各項目をアコーディオンとして表示することもできます (ここでも、章用、節用など)。デフォルトでは、チャプターを並べ替えることができます。1 つを選択すると、そのセクションを表示して並べ替えることができます。セクションを選択すると、アイデアが得られます。

それが役に立てば幸い！

于 2013-10-02T20:01:58.497 に答える