Web Design: Drag and Drop with jQuery UI Sortable

We have covered how to give custom style to jQuery UI, starting from the UI Accordion, UI Slider and the UI Date Picker. Today we will continue our exploration on jQuery UI in theming jQuery UI Sortable.

This particular plugin will enable a group of DOM to be sortable, meaning that we are able to move the object from one to another position. The following is how the final result will look like.

If you are ready, then let’s just get started.

Demo

Step 1: Preparing Essential Files

Before we start working on the code, we need to prepare a few essential things, including: the jQuery, the jQuery UI library, and the FontAwesome to deliver the icon we are going to use later on.

For the jQuery and the jQuery UI library, you don’t have to host them on your own, the better, practical way is to link them from CDN, as follow:


<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

Put those scripts inside the <head> or before the closing body tag for better load performance.

Furthermore, we will not use the default styles that come with jQuery UI, so we need to create a new CSS file to store our custom styles and then link it to our document, as follows.


<link rel="stylesheet" href="style.css" />

This next step is optional, you can leave is you want to. But, I prefer to normalize all the default DOM styles with noremalize.css or else you can also use CSS Reset from Eric Mayer.

Put this line inside the head before the style.css we have created previously.


<link rel="stylesheet" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css">

To sum up, here are all the files we link through inside the <head> tag.


<link rel="stylesheet" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css">
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

Recommended Reading: Reviewing CSS Priority Level

Step 2: HTML Structure

The HTML structure for jQuery UI Sortable is quite flexible. We can use a <div> or <dt>, as long as we wrap them inside a parent element with specific id attribute.

And in our case, we are going to use the <li> tag. Put all the HTML shown below inside the <body>.


<ul id="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
    <li class="ui-state-default">Item 6</li>
    <li class="ui-state-default">Item 7</li>
</ul>

Step 3: Activating UI Sortable

The id attribute that is attached on the parent element, as shown in the above code snippet, is important. This id is used for activating the DOM element to jQuery UI. To do so, put all the following script inside the <head> tag, right after all the other scripts we have added before.


<script>
    $(function() {
        $( "#sortable" ).sortable({
            placeholder: "ui-sortable-placeholder"
        });
    });
</script>

At this point, the UI Sortable should already work. You can click, hold, drag them top to bottom or vice versa. However, the presentation still looks white and plain.

Step 4: Defining New Font Family

As we mentioned earlier, we will need FontAwesome to deliver an icon. Download the package here, extract it and place all the fonts under a folder named font. And put these lines inside the style.css to define new font family in our web document, FontAwesome.


@font-face {
  font-family: "FontAwesome";
  src: url('font/fontawesome-webfont.eot');
  src: url('font/fontawesome-webfont.eot?#iefix') format('eot'),
  	   url('font/fontawesome-webfont.woff') format('woff'),
  	   url('font/fontawesome-webfont.ttf') format('truetype'),
  	   url('font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

Step 5: Styling The UI Sortable

In this step, we will start off styling the UI Sortable by adding background color for the body tag as follows:


body {
	background-color: #333;
}

Then, we specify the fix width of the UI Sortable, position it at the center of browser window as well as add some gimmicks, like so:


.ui-sortable {
	width: 350px;
	margin: 50px auto;
	background-color: #ccc;
	-webkit-box-shadow:  0px 0px 10px 1px rgba(0, 0, 0, .1);
  box-shadow:  0px 0px 10px 1px rgba(0, 0, 0, .1);
  list-style-type: none;
  padding: 0;
}

At this point, our UI Sortable will look like this screenshot below.

UI Default State

Next we will add the default styles for the <li> elements. These styles consist of the background gradient colors, the length of the elements, the borders, the text styles and specifically remove the border for the first child and the last child of the <li>.


.ui-sortable li.ui-state-default {
	margin: 0;
	height: 45px;
	line-height: 48px;
	font-size: 1.4em;
	color: #fff;
	outline: 0;
	padding: 0;
	margin: 0;
	text-indent: 15px;
	background: rgb(78,82,91);
	background: -moz-linear-gradient(top,  rgb(78,82,91) 0%, rgb(57,61,68) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(78,82,91)), color-stop(100%,rgb(57,61,68)));
	background: -webkit-linear-gradient(top,  rgb(78,82,91) 0%,rgb(57,61,68) 100%);
	background: -o-linear-gradient(top,  rgb(78,82,91) 0%,rgb(57,61,68) 100%);
	background: -ms-linear-gradient(top,  rgb(78,82,91) 0%,rgb(57,61,68) 100%);
	background: linear-gradient(to bottom,  rgb(78,82,91) 0%,rgb(57,61,68) 100%);
	border-top: 1px solid rgba(255,255,255,.2);
	border-bottom: 1px solid rgba(0,0,0,.5);
	text-shadow: -1px -1px 0px rgba(0,0,0,.5);
	font-size: 1.1em;
	position: relative;
	cursor: pointer;
}
.ui-sortable li.ui-state-default:first-child {
	border-top: 0;
}
.ui-sortable li.ui-state-default:last-child {
	border-bottom: 0;
}

After adding those colors, our UI will start looking better, as shown in the following screenshot.

Placeholder

No, this is not the Placeholder attribute for HTML5. The placeholder in jQuery UI refers to the blank spaces where the DOM element can be placed on. In this case, we will add this area with grey background and dashed border, like so.


.ui-sortable-placeholder {
	border: 3px dashed #aaa;
	height: 45px;
	width: 344px;
	background: #ccc;
}

Now, when you try to replace the DOM position you should see the area as shown in this screenshot below.

“Movable” Icon

Lastly we will add an icon to the <li> to show that it is movable. To do so, we will add this icon through the :after pseudo-element and assign FontAwesome font family exclusively.


.ui-sortable li.ui-state-default:after {
	content: "\f0c9";
	display: inline-block;
	font-family: "FontAwesome";
	position: absolute;
	right: 18px;
	top: 9px;
	text-align: center;
	line-height: 35px;
	color: rgba(255,255,255,.2);
	text-shadow: 0px 0px 0px rgba(0,0,0,0);
	cursor: move;
}

That’s all the codes we need. Finally you can view the demo and examine the source code through the following links. We hope you enjoyed this tutorial.