Tutorialzine - PHP MySQL CSS jQuery XHTML tutorials, resources, roundups and freebies. The answer to your development needs.

Introduction

This time we are working on presenting the users of BloggyBits.com with an easy way to change the order of the services that are shown in the widget. The most natural way of doing this is by dragging and dropping using jQuery’s sortable method – an easy way to convert a regular <ul> into a sortable list.

The sortable list

Step 1 – the XHTML

In our index.php file, we have the following code:

<ul id="sortable">
<li id="liDef"><div class="smallTab">&nbsp;</div></li>
</ul>

As we mentioned before, the whole sortable list is basically a unordered list UL. All the icons that you can drag around in the example on BloggyBits.com are LI elements inside it.

Inside the UL we have inserted a empty LI that is removed as soon as the document loads. This is a hack, that we use to properly size the UL before we create the sortable list with jQuery later.

Step 2 – jQuery

But how do we convert a regular UL into a jQuery sortable? After we include the jQuery library in the page with <script src=”"> we can use the following lines of code, which are positioned inside the $(document).ready{} function so they are executed when the page loads:

$("#sortable").sortable({
	handle : '.handle',
	axis:'x',
	containment: 'document'
});

$('#liDef').remove();

I believe I have to say a few words about this source. We convert the DIV with id=”sortable” into a sortable list. The ‘handle’ property means that you can reorder the services by dragging them for the center image, that is unique to every service and has a CSS class ‘handle’.

You can drag the items only horizontally, that is why we specify the axis property. And finally the containment property limits the drag of the elements to the edges of the browser window.

The bottommost line hides the default LI that we mentioned earlier.

At this point you may wonder how do we add new elements to the list? Remember last time, when we created the configuration list? I showed you a function that handled the click event of the checkboxes:

function checkIt(id)
{
	var el=$('#check'+id).attr('checked');

	if(!el)
	{
		$('#li'+id).remove();
	}
	else
	{
		$("#sortable").append('<li id="li'+id+'"><div class="smallTab"><img src="/images/iconsBig/'+(id+1)+'.gif" class="handle" /></div></li>');
		$("#sortable").sortable('refresh');
	}

	$('#title'+id).attr('disabled',!el);
	$('#user'+id).attr('disabled',!el);
}

If the checkbox is checked we append a new element in the sortable list with jQuery’s append() and later refresh the sortable so that everything works nicely (lines 11 & 12).

If it is not checked, that means we have unchecked it and the element has to be removed (line 7).

Lets take a look at what we are actually appending on line 11.

<li id="li'+id+'">
<div class="smallTab">
<img src="/images/iconsBig/'+(id+1)+'.gif" class="handle" />
</div>
</li>

This is a single draggable element in our sortable. It is a LI element that has an id which is assigned by the parameter of the function checkIt (which in turn is the unique id of the service, as assigned in the PHP configuration array we created in the last tutoral).

Inside this LI we have a div with a class name smallTab and the image we use as a handle for the mouse dragging. The handle class here only serves the purpose of being selected by the handler property of the sortable() method in jQuery and does not define any CSS styles.

Step 3 – the CSS

Here are the CSS classes, taken from main.css:

#sortable{
	margin:10px 0px 20px 0px;
	padding:0px;
	width:100%;
	height:80px;
}

#sortable li{
	float:left;
	list-style:none;
}

.smallTab{
	width:64px;
	height:64px;
	padding:5px;
	margin:5px 10px 5px 0px;
	background-color:#2b2b2b;
	border:1px solid #363636;
}

These style the sortable and its LI elemenets. The important thing to note here is that the Li elements are floated left this is so they are positioned next to each other which with conjunction with the axis property of the jQuery sortable() method above creates a horizontal sortable list.

Conclusion

Sortable lists are a flexible way to let your visitors customize a webapp and can be used in numerous ways. They are a design component that should be in your developer’s toolkit.

Next time we are serializing our sortable list and sending it over to the PHP back-end using ajax.

If you liked this tutorial you can subscribe to our RSS feed or follow us on twitter.

Related: