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

Question

I've made a research but found nothing which will fit my case. Here is my simplified 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>

When dragging item-1, item-2 and so on, I need all its children to be dragged as well. But when dragging item-1.1, item-1.2, they should be dragged separately. I've tried to use multisortable jquery plugin but when I'm dragging the parent "li" tag, the placeholder where the item should be dropped is too big (because of its height), here is its CSS.

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

The code I use for sortable

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

Is there a way to somehow achieve this?

Answer 1

You can add .sortable to the child ul elements as below.

I've adapted the CSS a little bit, ideally you would avoid using !important . I've added padding to the bottom of the .sortable elements so it is easier to drag an item to the bottom of the list, and denoted indented droppable areas with a dashed border.

You can also see that you can continue to indent subsequent droppable child ul , although it starts looking quite busy!

Let me know if this isn't what you wanted.

---

 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>