Array

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

WordPress Table of Contents Plus Not Working

I have been using this plugin for a while and i really like it. It seems to have completely stopped working recently. I can...

Function Keys Reversing Between Fn Actions And Normal

My keyboard has the usual F1 to F12 keys along the top. I use these for shortcuts in various applications. These keys also have...

Whirlpool Oven F6E6: Appliance Manager 1 Board Communication

I have a brand new Whirlpool oven W11I OM1 4MS2 H or (859991549450). I bought it alongside the microwave combi oven. I have had...

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

Markdown To Html Converter

Welcome to our web-based tool designed to make your life easier by converting Markdown to HTML in a matter of seconds. Our user-friendly interface...

AI Content Detector

We've got this awesome free tool that'll help you figure out if that content you're looking at was written by a human or some...

Image Saturation

Are you looking for an easy-to-use, free app to modify your image saturation levels and make your pictures truly pop? Look no further! Our...

Pixelate Image Tool

Introducing the ultimate free online image pixelator tool that allows you to easily transform your images into stunning pixel art in just a few...

Image RGB Level Adjustment Tool

Introducing the ultimate image color adjustment tool for all your photo editing needs. Our free online tool lets you take full control of your...

Image Color Inverter

Looking for a quick and efficient way to convert your images into negatives? Our Free Image to Negative Converter is the answer! Our online...

Latest Posts

Latest Questions