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


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

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?

https://validator.w3.org/


#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:
https://www.w3schools.com/howto/howto_js_sort_table.asp


#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:
- http://schne324.github.io/dragon-drop/demo/
- https://bevacqua.github.io/dragula/