如何使用 JqueryUi sortable 一次并同时分别拖动多个项目？

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 元素的底部添加了填充，以便更容易将项目拖到列表底部，并用虚线边框表示缩进的可放置区域。

您还可以看到您可以继续缩进后续的可放置子项 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>

如何使用 JqueryUi sortable 一次并同时分别拖动多个项目？

How to drag multiple items at once and at the same time separately with JqueryUi sortable?

html

javascript

css

jquery

jquery-ui-sortable