Published on: 12 June, 2013

JQuery sortable elements using drag and drop

Posted by andy | 2163 views 0 likes 0 favourites 2 comments
Tumblr Digg Google Plus

Another amazing effect provided by JQuery library is the ability to sort an object list on the fly by performing a drag and drop option.  In this tutorial you will learn how easily you can build the sortable elements by using JQuery.

Firstly we need to import the following javascript libraries.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Fo example, we will sort a list of div tag element. You can copy and paste the following code. Note: we include a textbox, so you can see the sorting values.

<div id="accordion">
    <div class="group" id="divGroup1">
        <div class="content">Section 1</div>
    </div>
    <div class="group" id="divGroup2">
        <div class="content">Section 2</div>
    </div>
    <div class="group"  id="divGroup3">
        <div class="content">Section 3</div>
    </div>
    <div class="group"  id="divGroup4">
        <div class="content">Section 4</div>
    </div>
</div>
 
 <input id="changevalues" type="text" value="" />

Next, we will create a function that will execute during the window load, it will look for a html tag named accordion and w

<script type="text/javascript">
	$(function () {
		$("#accordion")
            .accordion({
            	header: "> div > div.content"
            })
            .sortable({
            	axis: "y",
            	handle: "div.content",
            	update: function (event, ui) {
            		getValues();
            	}
            });
	});

	function getValues() {
		var values = [];
		$('#accordion > .group').each(function (index) {
			values.push($(this).attr("id").replace("divGroup", ""));
		});
		$('#changevalues').val(values);
	}
</script>

We add some style to the list, so you can see the action easily.

 <style type="text/css">
    .group{
        background:gray;
        color:#ffffff;
        margin:3px 0;
        cursor:pointer;
        width:200px;
        padding:10px;
		border-radius:5px;
    }
	
	.group:hover{
		background:#9C3;
	}
 </style>

See the quick demo below.

Please see carefully the given value entered in the text box on the time you perform a sortable items.

Section 1
Section 2
Section 3
Section 4

 

Comments
Iain
Commented on: 03 Oct, 2017 11:33:09 AM
Is there a way to make this work on a phone? It worked great on a computer with a mouse, but just slides the page on a phone.
andy
Commented on: 10 Oct, 2017 07:15:37 PM
Unfortunately, it is not supported in mobile. You might want to have a look in Jquery Mobile version, where it supports swipe functionality.
Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Related Articles
Published on: 22 March, 2016
In this tutorial, you will learn how to create a category menu list using css and JQuery framework. You will also learn on how to automatically place an arrow into the LI element if it founds there is a sub menu list. The placement of the arrow is done via JQuery, this includes binding the event onclick on the LI element as well to expand and collapse the sub menu list.
Published on: 08 March, 2016
Completely new to JQuery script? Don't worry, you are not alone. We have summarize a list of tips for newbie to learn JQuery faster. The best way to strength your JQuery skills is by testing our tips directly in your html files and run it.
Related Tutorials
Published on: 25 January, 2016
So what actually an event? An event can be considered as a result of an action triggered by a process which can be a process clicking of a user or when a page is loading.
Published on: 20 December, 2015
Learn how easily to manipulate DOM element selection using JQuery. One of the cool feature from JQuery is the DOM selector. In javascript, when you want to reference an object, you can refer the object either based on ID or class name of the object by using the built in function such as getElementById or getElementByTagName or getElementsByClassName.
Published on: 15 December, 2015
Getting started by writing your first JQuery code. Learn how to create it from scratch and apply it on your site. The best way to start your first JQuery function is after the browser has completedly loaded the page content. There are two short methods to do so.
Published on: 13 December, 2015
Learn what is the JQuery framework is and why many web developers and designers love to this framework.