如何使用可排序的 JqueryUi 一次同时拖动多个项目？

Question

我进行了一项研究，但没有发现任何适合我的情况。这是我的简化html

<div>
  <div>
    <ul class="sortable">
      <li id="item-1">
        <!-- item -->
        <ul>
          <!-- plenty of li tags -->
          <!-- they have ids like: item-1.1, item-1.2 and so on -->
        <ul>
      </li>
    </ul>
  </div>
  <div>
    <ul class="sortable">
      <!-- same goes here -->
    </ul>
  </div>
</div>

当拖动 item-1、item-2 等时，我也需要拖动它的所有子项。但是在拖拽item-1.1、item-1.2的时候，要分别拖拽。我尝试使用 multisortable jquery 插件，但是当我拖动父“li”标签时，应该删除项目的占位符太大（因为它的高度），这是它的 CSS。

  background-color: rgba(220, 224, 228, .25) !important
  height: 150px
  margin-bottom: 8px
  border-radius: 8px
  border: 1px solid $color-border !important

我用于排序的代码

const sortableOptions = {
  connectWith: ".sortable",
  cancel: ".ignore-sortable",
  placeholder: "ui-state-highlight",
}
$(".sortable").sortable(sortableOptions).disableSelection();

有没有办法以某种方式实现这一目标？

Answer 1

您可以将.sortable 添加到子ul 元素，如下所示。

我已经稍微调整了CSS，理想情况下你会避免使用!important。我在.sortable 元素的底部添加了填充，以便将项目拖到列表底部更容易，并用虚线边框表示缩进的可放置区域。

您还可以看到，您可以继续缩进后续的 droppable child ul，尽管它开始看起来很忙！

如果这不是你想要的，请告诉我。

---

const sortableOptions = {
  connectWith: ".sortable",
  cancel: ".ignore-sortable",
  placeholder: "ui-state-highlight",
}

$(".sortable").sortable(sortableOptions).disableSelection();

.sortable {
  background-color: rgba(220, 224, 228, .25);
  padding-bottom: 1em;
  border-radius: 8px;
  border: 1px solid blue;
}

.sortable .sortable {
  background: none;
  border-style: dashed;
}

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

<div>
  <ul class="sortable">
    <li id="item-1">
      <!-- item -->
      Section 1
      <ul class="sortable">
        <li>1.1
        </li>
        <ul class="sortable">
          <li>1.1</li>
          <li>1.2</li>
        </ul>
        <li>1.2</li>
      </ul>
    </li>
  </ul>
</div>
<hr>
<div>
  <ul class="sortable">
    <li>Second List Group 1
      <ul class="sortable">
        <li>1.1</li>
        <li>1.2</li>
      </ul>
    </li>

    <li>Second List Group 2</li>
  </ul>
</div>
<hr>

<div>
  <ul class="sortable">
    <li id="item-1">
      <!-- item -->
      Section 1
      <ul class="sortable">
        <li>1.1
        </li>
        <ul class="sortable">
          <li>1.1
            <ul class="sortable">
              <li>1.1.1</li>
              <li>1.1.2</li>
            </ul>
          </li>
          <li>1.2</li>
        </ul>
        <li>1.2</li>
      </ul>
    </li>
  </ul>
</div>