jQuery 排列可排序，按 ID 排列

Question

这 html structure.i 使 li 可以用 jquery 排序。但希望 id= type1 的列表始终保持在一起并且 type2 分开。并且 type2 不应该在列表中移动 type1

 <div id="container" class="container">
      <li id="type1" class="type1">Option 1<li>
      <li id="type1" class="type1">Option 2<li>
      <li id="type1" class="type1">Option 3<li>
      <li id="type1" class="type1">Option 4<li>
      <li id="type2" class="type2">Option 5<li>
      <li id="type2" class="type2">Option 6<li>
    </div>

我很困惑如何使用 jQuery 实现此目的。请帮助。谢谢

Answer 1

我已经尝试使用 jQuery UI 来解决您的问题。下面是代码。希望对你有帮助。

$('container').sortable()
$('.container-type').sortable()

.type1, .type2{
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="container" class="container">
  <ul class="container-type">
    <li id="type1" class="type1">Option 1</li>
    <li id="type1" class="type1">Option 2</li>
    <li id="type1" class="type1">Option 3</li>
    <li id="type1" class="type1">Option 4</li>
  </ul>
  <ul class="container-type">
    <li id="type2" class="type2">Option 5</li>
    <li id="type2" class="type2">Option 6</li>
  </ul>
</div>

jQuery 排列可排序，按 ID 排列

jQuery arrange sortable , arrange by ID's

jquery

list

jquery-ui-sortable