search

johnny / jquery-sortable

A flexible, opinionated sorting plugin for jQuery
http://johnny.github.io/jquery-sortable/
Other
1.52k stars 441 forks source link

Multi-Nested Lists - The First Example #261

Open LordA98 opened 5 years ago

LordA98 commented 5 years ago

This seems like a stupid question, but I can't seem to find anything helpful.

I've got a multi-nested list. I can't seem to drop items into lowest layer of the list. The structure I want is exactly the same as the first example on the website page (Site), directly under 'Features'.

I have tried to find the code for this example but I can't see it anywhere.

Does anyone know where it is? Or can anyone give me a simple example of how it's done? I'm not sure where I'm going wrong.

Every li has a child ol, but getting into the lowest layer doesn't work, and attempting to drop an li into an li item with no current children also doesn't work.

Thanks in advance, Alex

LordA98 commented 5 years ago

Apologies - the issue was related to Bootstrap and the list-group-item class. The ol cannot handle items with relative position, and was hence failing. Similar to this issue - Issue 247.

The solution:

HTML:

<ul class="list-group sortable">
    <li class="list-group-item no-position">
      First
      <ul class="list-group">
          <li class="list-group-item">

i.e. only the first child item has no-position added to it.

CSS:

.no-position:not(.dragged) {
    position: initial;
}