📡 You're offline — showing cached content
⚡ New version available!
Quick Access
🗺️ Roadmaps 🃏 Flashcards 📚 Series 🎓 Tutorials 🗺️ My Path 🎤 Mock Interview ⚡ Cheat Code 📄 Resume Builder 🛠️ Dev Tools
Tutorials › jQuery in Practice › Sortable Lists

Sortable Lists

4 min read
jQuery UI sortable() makes lists reorderable by drag and drop. The update event fires when the order changes. Use toArray({attribute: 'data-id'}) to get the new item order and send it to the server.

Sortable with jQuery UI

$('ul#list').sortable({
  axis: 'y',
  update: function() {
    const order = $('ul#list li')
      .map(function() { return $(this).data('id'); })
      .get();
    $.post('/api/sort', { order });
  }
});