使用 jquery UI sortable 对多个 UL 和 LI 元素进行排序

Question

i am working on sorting multiple ul and li elements using jquery UI sortable and the html code is like below,

<ul class="nav navbar-nav groupsList ui-sortable" id="groupsList">

  <li class="dropdown group ui-sortable-handle" id="group1">
    <a href="#" class="dropdown-toggle mdl_active" data-toggle="dropdown" role="button" aria-expanded="false">Introduction <span class="caret"></span></a>
    <ul id="groupItems1" class="dropdown-menu itemsList ui-sortable" role="menu">
       <li class="handle ui-sortable-handle" data-id="6"><a href="#">Module 1 topic1</a></li>
       <li class="handle ui-sortable-handle" data-id="7"><a href="#">Module 1 topic 2</a></li>
       <li class="handle ui-sortable-handle" data-id="14" style=""><a href="#">module 2 MCQ challenge</a></li><li class="handle ui-sortable-handle" data-id="10"><a href="#">INterview with Boman irani</a></li>
       <li class="handle ui-sortable-handle" data-id="11"><a href="#">New topic newly added</a></li>
       <li class="handle ui-sortable-handle" data-id="17"><a href="#">Game 2</a></li>
     </ul>
   <div class="clearfix"></div>
   </li>

   <li class="dropdown group ui-sortable-handle" id="group2">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Discover <span class="caret"></span></a>
    <ul id="groupItems2" class="dropdown-menu itemsList ui-sortable" role="menu">                                                          
     <li class="handle ui-sortable-handle" data-id="15"><a href="#">MCQ Challenge 55</a></li>
     <li class="handle ui-sortable-handle" data-id="4" style=""><a href="#">Module 2 Topic</a></li>
     <li class="handle ui-sortable-handle" data-id="5"><a href="#">Module 2 Topic 2</a></li>
     <li class="handle ui-sortable-handle" data-id="13"><a href="#">MCQ Challenge</a></li>
     <li class="handle ui-sortable-handle" data-id="16"><a href="#">Game1</a></li>
   </ul>
   <div class="clearfix"></div>
  </li>

  <li class="dropdown group ui-sortable-handle" id="group3">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Define <span class="caret"></span></a>
    <ul id="groupItems3" class="dropdown-menu itemsList ui-sortable" role="menu">
     <li class="handle ui-sortable-handle" data-id="1"><a href="#">Topicc 1</a></li>
     <li class="handle ui-sortable-handle" data-id="2"><a href="#">Topic 2</a></li>
     <li class="handle ui-sortable-handle" data-id="3"><a href="#">Test</a></li>
   </ul>
   <div class="clearfix"></div>
  </li>

</ul>

Jquery code is,

$('#groupsList').sortable();
$('.itemsList').sortable({
    connectWith: $('.itemsList'),
    update: function( event, ui ) {

    var sortData = $( ".itemsList" ).sortable('toArray',{ attribute: 'data-id'});
    console.log(sortData);
    }
});

Now i want to get array of id's in one array or module wise. but above code displays only first ul array data like below,

["6", "10", "7", "11", "14", "17"]

i want all three module data id in this array. Note: above ul is dynamic and i have written this using laravel/php for loop

Answer 1

This can be done easily enough with vanilla JavaScript and DOM API. See the comments in the code for step by step explaination:

 // Use querySelectorAll to get all matching elements based on the class name // Note the spread syntax used to spread the querySelectorAll result into an Array const sortedIds = [...document.querySelectorAll('.ui-sortable-handle')] // Filter out any matches that dont have a data-id attribute.filter(el =>..el.dataset.id) // Extract only the dataset.id of each element to a new array.map(el => el.dataset.id) // Sort the array of dataset,id elements in ASC order;sort((a. b) => a - b); console.log(sortedIds)

 <ul class="nav navbar-nav groupsList ui-sortable" id="groupsList"> <li class="dropdown group ui-sortable-handle" id="group1"> <a href="#" class="dropdown-toggle mdl_active" data-toggle="dropdown" role="button" aria-expanded="false">Introduction <span class="caret"></span></a> <ul id="groupItems1" class="dropdown-menu itemsList ui-sortable" role="menu"> <li class="handle ui-sortable-handle" data-id="6"><a href="#">Module 1 topic1</a></li> <li class="handle ui-sortable-handle" data-id="7"><a href="#">Module 1 topic 2</a></li> <li class="handle ui-sortable-handle" data-id="14" style=""><a href="#">module 2 MCQ challenge</a></li> <li class="handle ui-sortable-handle" data-id="10"><a href="#">INterview with Boman irani</a></li> <li class="handle ui-sortable-handle" data-id="11"><a href="#">New topic newly added</a></li> <li class="handle ui-sortable-handle" data-id="17"><a href="#">Game 2</a></li> </ul> <div class="clearfix"></div> </li> <li class="dropdown group ui-sortable-handle" id="group2"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Discover <span class="caret"></span></a> <ul id="groupItems2" class="dropdown-menu itemsList ui-sortable" role="menu"> <li class="handle ui-sortable-handle" data-id="15"><a href="#">MCQ Challenge 55</a></li> <li class="handle ui-sortable-handle" data-id="4" style=""><a href="#">Module 2 Topic</a></li> <li class="handle ui-sortable-handle" data-id="5"><a href="#">Module 2 Topic 2</a></li> <li class="handle ui-sortable-handle" data-id="13"><a href="#">MCQ Challenge</a></li> <li class="handle ui-sortable-handle" data-id="16"><a href="#">Game1</a></li> </ul> <div class="clearfix"></div> </li> <li class="dropdown group ui-sortable-handle" id="group3"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Define <span class="caret"></span></a> <ul id="groupItems3" class="dropdown-menu itemsList ui-sortable" role="menu"> <li class="handle ui-sortable-handle" data-id="1"><a href="#">Topicc 1</a></li> <li class="handle ui-sortable-handle" data-id="2"><a href="#">Topic 2</a></li> <li class="handle ui-sortable-handle" data-id="3"><a href="#">Test</a></li> </ul> <div class="clearfix"></div> </li> </ul>