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

How can I safely dispose of floppy disks without a drive?

I have a bunch of floppy disks that belonged to my late dad, and I need to get rid of them, but I don't...

What’s the Best Way for Small Businesses to Purchase UPS Systems?

Hey folks! I'm trying to understand how smaller clinics and businesses in the U.S. typically go about buying UPS systems. Do they usually put...

How can I speed up transferring 7TB of data from Azure Files?

Hey, I've been dealing with a frustrating issue trying to get about 7TB of data out of Azure Files as we are planning to...

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

Online Hash Generator – String to Hash Converter

Need to quickly generate a hash from a string? Whether you're verifying file integrity, securing data, or just experimenting with cryptographic tools, this simple...

Convert CSV To HTML Table

Need to quickly turn CSV data into an HTML table? Whether you're copying data from Excel, Google Sheets, or another spreadsheet, this tool makes...

Student Group Randomizer

Creating fair and balanced groups in the classroom can be time-consuming — especially when you're trying to avoid repetition, manage different skill levels, or...

Random Group Generator

Need to split a list of people, items, or ideas into random groups? Our free Random Group Generator makes it quick and easy. Whether...

Flip Text Upside Down – Free Online Tool

Ever wanted to flip your text upside down just for fun or to grab someone’s attention in a creative way? This free online Upside...

Raffle Ticket Generator

If you're running a fundraiser, charity draw, or local event and need raffle tickets fast, this free online tool lets you generate and print...

Latest Posts

Latest Questions