javascript - jQuery Sortable 防止用户将子项目移动到父项目

Question

我有这个 HTML 列表:

<ol class="sortable subcategory_item">
    <li data-id="102">A</li>
    <li data-id="111">B</li>
    <li data-id="1712">GROUP A
        <ol class="group_items">
            <li data-id="105">GROUP MEMBER 1</li>
            <li data-id="108">GROUP MEMBER 2</li>
            <li data-id="109">GROUP MEMBER 3</li>
        </ol>
    </li>
    <li data-id="110">C</li>
    <li data-id="113">D</li>
</ol>

问题是我能够移动 GROUP A 下的项目给他们的 parent 。

如何防止GROUP MEMBER 1 , GROUP MEMBER 2和GROUP MEMBER 3 (或 <ol class="group_items"> 内的项目移至 GROUP A 上方？

我目前正在使用jquery-sortable plugin但如果我必须切换使用另一个插件，我也没关系。

Answer 1

您可以简单地使用 jQuery UI sortable，它默认按照您想要的方式运行:

$('.sortable,.group_items').sortable();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<ol class="sortable subcategory_item">
  <li data-id="102">A</li>
  <li data-id="111">B</li>
  <li data-id="1712">GROUP A
    <ol class="group_items">
      <li data-id="105">GROUP MEMBER 1</li>
      <li data-id="108">GROUP MEMBER 2</li>
      <li data-id="109">GROUP MEMBER 3</li>
    </ol>
  </li>
  <li data-id="110">C</li>
  <li data-id="113">D</li>
</ol>