How To Get Element Order Using jQuery Sortable

If you are using the sortable feature of the jQuery library, you will likely want a way to get the order of the elements. You can do this very easily using one of the built in events. The following code will obtain the element order for a sortable div and output the data to the console.

<ul id="#sortable">
	<li data-id="1">Item 1</li>
	<li data-id="2">Item 2</li>
</ul>

$( "#sortable" ).sortable(
{
	stop: function( event, ui ) 
	{
		var idsInOrder = $("#visualpreview").sortable('toArray', { attribute: 'data-id' });
		console.log(idsInOrder);
	}
});

The output will be a simple numeric array e.g. [1,2]. You can loop over this array and do what you need to do. You can also save these to a comma delimited string if you need to submit the order of a sortable list through a form.

Related Articles

Related Questions

Help with RDR2 Graphics Glitches

I've been experiencing some pretty frustrating graphics glitches in Red Dead Redemption 2. As I get closer to certain objects, they flicker, and I...

How to Start Learning about Virtual Machines and Language Design?

Hey everyone! I'm diving into the world of virtual machines, specifically stack-based and register-based types. My goal is to build one from the ground...

Help! My Work PC Keeps Crashing After a Windows Update

Hey everyone! I built my first Windows PC back in February last year. It's a pretty high-end setup with a 14900K processor and a...

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Latest Tools

OpenAI Token Calculator

This tool is a simple OpenAI token calculator, web-based utility designed to help you quickly estimate the number of tokens in your text when...

List Sorting Tool

Welcome to our innovative list ordering and management tool. This next-level platform enables you to sort a list of items in ascending or descending...

Sudoku Solver

Welcome to our free online Sudoku solving tool, an interactive platform for puzzle enthusiasts seeking a break from a Sudoku conundrum. This advanced platform...

Apply Image Filters To Image

Digital imagery in the modern world is all about reinforcing emotions and stories behind each photo we take. To amplify this storytelling, we are...

Add Watermark To Image

As the world is increasingly consumed by digital media, protecting your original images is paramount. We are thrilled to introduce you to our innovative...

CSV To Xml Converter

Welcome to our CSV to XML converter tool, a convenient and user-friendly solution for all your data conversion needs. This versatile tool on our...

Latest Posts

Latest Questions