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

What are reliable alternatives to Openprovider for automated .ch domain registration?

I'm building a SaaS that automatically registers domains for Swiss SMEs immediately after checkout, without any manual intervention. I'm testing Openprovider, but I've run...

How do you securely deploy Azure Landing Zones from Azure DevOps?

I'm designing a configuration-driven Azure Landing Zone deployment using infrastructure as code, such as Bicep, and Azure DevOps. The difficult part is securing identity...

My SATA SSD became extremely slow and occasionally stops responding—what can I troubleshoot?

I built a PC about three years ago with a 500GB NVMe drive for the operating system and a 2TB TEAMGROUP CX2 SATA SSD...

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

Erase Gemini Nano Banana Watermark

Below is a simple content eraser tool. It works very similar to the content aware fill tool that is used in Photoshop. You can...

Keep Your Screen Awake Tool

This simple online stay awake tool prevents your computer screen from going to sleep while you have this page open. It runs entirely in your...

Neural Network Simulation Tool

The Neural Network Visual Builder is an interactive, client-side tool designed to demystify deep learning. It allows users to drag-and-drop neural network layers to...

Ray Trace Simulator – Interactive Optical Ray Tracing Tool

This ray trace simulator lets you visualise how light rays move through an optical system in real time. You can trace beams as they...

Interactive CPU Architecture Simulator

This is an Interactive CPU Architecture Simulator that provides a hands-on, visual learning experience for understanding how a processor executes code. It models a...

AI Image Upscaler

Our AI Image Upscaler allows you to upload any image and instantly increase its resolution using advanced upscaling models. Choose between 2x, 3x or...

Latest Posts

Latest Questions