Блог

Я провел исследование, но не нашел ничего, что соответствовало бы моему случаю. Вот мой упрощенный 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>
 

При перетаскивании элемента-1, элемента-2 и так далее мне нужно, чтобы все его дочерние элементы также перетаскивались. Но при перетаскивании item-1.1, item-1.2 их следует перетаскивать отдельно. Я пытался использовать многосортируемый плагин 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();
 

Есть ли способ как-то добиться этого?

Вы можете добавить .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>