Beginners Guide to jQuery Sorting ~ OneAoneJ

Beginners might often steer away from trying to reorder lists by dragging and dropping. The thought of doing something like that sounds daunting. Luckily jQuery has made it relatively simple. Here is a tutorial on how to make a list sortable.

What We’re Building

Quite simply, we’re trying to give the user the ability to sort a list by dragging and dropping items into place. We’re also going to give a nice place holder to help guide the user.

Building the HTML

Fortunately the HTML is pretty simple. All you will need is a simple un-ordered list, with some items in it.
HTML:

1
2
3
4
5
6
7
8
9

The CSS

The CSS is solely for appearances. You don’t have to use what I used here, feel free to experiment with different styles. The only class that needs any sort of explanation is the highlight class. This class is for the placeholder for when the user starts dragging. So more than likely you’ll want to make this subdue, it’s just suppose to be a hint of where to drag the box.
CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

/*Styling the body*/
body{
background-color: #111;
color:white;
font-family: Arial, "MS Trebuchet", sans-serif;
}

/* Get rid of bullets and list indent,
also adjust the width to what we want*/
#sortable {
list-style-type: none;
margin: 0;
padding: 0;
width:300px

}

/* Styling each of the list elements*/
#sortable li {
margin: 0 5px 5px 5px;
padding: 5px 20px;
font-size: 1.2em;
height: 1.5em;
background-color: #678;
cursor:pointer;

}

/* Styling the placeholder for when
the user starts dragging an item */
#sortable li.highlight {
height: 1.5em;
line-height: 1.2em;
background-color: #036;
background-image: none;
border:none;
}

The jQuery

We’ll be using a library from the jQuery UI. This does all the complicated code so you don’t have to. You’re going to have to import 3 files

jQuery : http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
jQuery UI Core file : http://jqueryui.com/latest/ui/ui.core.js
jQuery UI Sortable file : http://jqueryui.com/latest/ui/ui.sortable.js

Once we have these imported then we’re good to go. The jQuery that we’ll have to write isn’t overly complicated.
jQuery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

//When everything is loaded...
$(document).ready(function() {

//makes the list with the id "sortable" sortable.

//the placehoder option is not necessary.
//the highlight is the CSS class applied
//to the placeholder.

$("#sortable").sortable({
placeholder: 'highlight'
});

//prevents the list from being selectable.
$("#sortable").disableSelection();
});

Conclusion

Now that you realize how easy it is to create a sortable list, use and abuse it. Keep an eye out for part two of this tutorial where I will show how to interact with the database via AJAX.
Here is the code all together:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en">
<head>
<title>jQuery UI Sortable - Drop placeholder</title>

<style type="text/css">
body{
background-color: #111;
color:white;
font-family: Arial, "MS Trebuchet", sans-serif;
}
#sortable {
list-style-type: none;
margin: 0;
padding: 0;
width:300px

}
#sortable li {
margin: 0 5px 5px 5px;
padding: 5px 20px;
font-size: 1.2em;
height: 1.5em;
background-color: #678;
cursor:pointer;

}
#sortable li.highlight {
height: 1.5em;
line-height: 1.2em;
background-color: #036;
background-image: none;
border:none;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.sortable.js"></script>
<script type="text/javascript">
$(function() {
$("#sortable").sortable({
placeholder: 'highlight'
});
$("#sortable").disableSelection();
});
</script>
</head>
<body>

<ul id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>

</body>
</html>

Friday, November 8, 2013

Beginners Guide to jQuery Sorting

What We’re Building

Building the HTML

The CSS

The jQuery

Conclusion