How to make both dynamic parent list and sub-list sortable using jQuery?

JavaScript
1

I have the following structure:

<ul class="concepts">
  <button type="button" id="add_concept">ADD CONCEPT</button>
  <p>Container of Concepts</p>
  <li class="courseConcept">
    <p>This is a concept</p>
    <div class="conceptContent">
      <div class="content">
        This is content within concept
      </div>
    </div>
    <button type="button">ADD CONTENT</button>
  </li>
</ul>

Output of the above code:

1271×189 8.16 KB

Here, both the <ul> and <li>'s should be sortable?

And how can I receive the updated order when I reorder both the sub-list i.e. <li> and as well as when <ul>?

2

Question. When you test the HTML in the validator does it pass?

3

Your code is illegal; you can’t put any tags within a <ul> other than the <li> tags. <p> and <button> are illegal in <ul> tags. So your structure will not work properly.

See if this page gives you the sorting structure you need:

6

The following from your HTML code is not valid.

<ul class="concepts">
  <button type="button" id="add_concept">ADD CONCEPT</button>
  ...
</ul>
7

That the HTML is valid is only the start to make it work properly.

You can find the sortable example here: https://jqueryui.com/sortable/

But there are also good vanilla js alternatives:

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.