0

我正在尝试创建一种移动“章节”的方式。我的问题是我无法理解如何。如果你们中的任何人对你是如何做到的有一个想法或例子，那就太好了。

我在想一些类似列表的东西。您可以在其中拖动或单击“章节”。

像这样：

  • 第一章
    • 章Aa
      • 章 Aaa
      • 章Aab
    • 章Ab
  • 第二章
    • 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 个（在这种情况下）：一个用于章节，一个用于小节，一个用于小节。您可以根据当前选择的内容显示和隐藏相应的小部件。

此外，您可以将每个项目显示为手风琴（同样，一个用于章节，一个用于部分，等等）。默认情况下，您可以重新排序章节。一旦你选择了一个，你就可以查看和重新排序它的部分，一旦你选择了一个部分......好吧，你明白了。

希望能帮助到你！

于 2013-10-02T20:01:58.497 回答