Sortable + nested lists with jQuery UI 1.8.2

Question

This question is all over SO, but no one seems to have had the same problem as I have.

When I do something like this

$(function(){
    $('#unique-ul').sortable({items:'li'});
});

I'd expect it to "just work". By and large, it does. I can drag any <li> from any list to any other list, and any sublist of that <li> is dragged with it.

However, when dragging, it seems to get really confused about where it should be dropped. Here's an example using 1.8.0; it displays the same behaviour.

http://jsbin.com/ewuxi3/

All the other responses I've found about this lead me to believe that this behaviour is supported by jQuery UI; for example, here is a bug registered against 1.7 about nested draggables: http://dev.jqueryui.com/ticket/4333

I can't find anyone else who has had this issue so it suggests I am Doing It Wrong. Any clues?

biberman · Accepted Answer · 2021-06-09 08:03:01Z

82

this happens because Sortable doesn't really know if you are above the nested <li> or the one that contains it. One solution is to use a structure like this:

$(document).ready(function() {
  $('#sortable-category').sortable({
    items: 'li',
    toleranceElement: '> div'
  });
});

* {
  box-sizing: border-box;
  list-style: none;
}

ul > li > div {
  margin-bottom: 5px;
  border-bottom: 1px solid #ddd;
}

ul,
ul > li > div {
  display: block;
  width: 100%;
  float: left;
}

ul > li {
  display: block;
  width: 100%;
  margin-bottom: 5px;
  float: left;
  border: 1px solid #ddd;
}

<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>

<ul id="sortable-category">
  <li>
    <div>Item 1</div>
    <ul>
      <li>
        <div>Subitem 1</div>
      </li>
      <li>
        <div>Subitem 2</div>
      </li>
    </ul>
  </li>
  <li>
    <div>Item 2</div>
  </li>
  <li>
    <div>Item 3</div>
  </li>
</ul>

and set the option toleranceElement: '> div'. I don't know why it isn't documented, but it's in there and it tells Sortable to take into consideration just the <div> when calculating intersections.

In case you are interested, I recently developed a plugin which makes nested sorting easier, allowing to create new nested lists on the fly.

edited Jun 9, 2021 at 8:03

biberman

5,7794 gold badges16 silver badges39 bronze badges

answered Sep 8, 2010 at 10:10

mjsarfatti

1,7451 gold badge15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Altreus Over a year ago

Your plugin seems excellent - I had a play with the demo, and I'll have a look at implementing it myself when I have a spare moment.

Andrew Bullock Over a year ago

this looks BOSS. ive spent all afternoon trying to find something as simple as this which ACTUALLY WORKS! thankyou!

DropTheNerd Over a year ago

Thanks mjsarfatti! toleranceElement: '> div' was exactly what I needed.

Zain Shaikh Over a year ago

does this sortable plugin works on anything else li? I have bunch of elements including div, img, ul>li, a, span etc etc. and want to apply nested sorting on them.

Sarower Jahan Over a year ago

Awesoem plugin, But Is it possible, to drag any item under 3rd children or more down?

|

Collectives™ on Stack Overflow

Sortable + nested lists with jQuery UI 1.8.2

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related