Blockbuster Like Drag and Drop Sorting with jQuery – Pt 2

A few months ago I wrote a blog post introducing some Blockbuster like Drag and Drop Sorting code I had written using jQuery. I promised a follow up post dissecting the code, and after much delay. Here it is:

If you look at the first blog post you can see the entire code block. In this post I’m going to focus on the functions I use and not rehash the entire page. I did clean up some of the functions since the initial post and hopefully will at some point update that code.

$(function() {
$("#items").sortable({
items: 'li',
cursor: 'move',
stop:     function (){
renumberItems();
}
});

});

This is the first function you’ll find and it’s your standard sortable creation. The only thing special about this is that I have a callback function for stop that calls the renumberItems function.

function moveUp(instanceID) {
if(instanceID != $('#items li:first').attr('id')) {
$('#'+instanceID).insertBefore($('#items li:first'));
renumberItems();
}
}

You’ll notice the moveUp function looks a bit different than the one I originally posted. After posting it I discovered a bug that resulted in the first item disappearing if you tried to move it up. I now check to make sure that the item that’s being moved isn’t the first item. After that I just the jQuery insert before function and place the desired item before the first item in the list. I then call the renumberItems function that we’ll look at shortly the update the text boxes.

function moveDown(instanceID) {
if(instanceID != $('#items li:last').attr('id')) {
$('#'+instanceID).insertAfter($('#items > li:last'));
renumberItems();
}
}

The moveDown function just does the opposite of the moveUp function. I take advantage of the insertAfter function to move the selected item after the last item in the list.

function removeItem(instanceID) {
$('#'+instanceID).remove();
renumberItems();
}

The moveItem function just calls the remove function on the selected element. We then call renumberItems to update the textboxes with the correct numbers.

function renumberItems(){
count = 1;
$('#items li').each(function (i) {
id = $(this).attr('id');
$('#'+id+'-order').attr('value',count);
count++;
});
}

The renumberItems function has be referenced a couple times and I’m sure you’ve been eager to finally take a look at it. It’s actually a pretty basic function, we select all the li items and loop over them using the each function. We then get the id and use that id to set the related order text box to the correct number using an incrementing count variable.

function reOrderItems(instanceID) {
var curPos = $('#items li').index($('#'+instanceID))+1;
if($('#'+instanceID+'-order').attr('value') >= $("#items li").size()){
$('#'+instanceID+'-order').attr('value',$("##items li").size());
if(curPos == $("#items li").size()) {
$('#'+instanceID+'-order').attr('value',$("#items li").size());
return;
}
}
if($('#'+instanceID+'-order').attr('value') < curPos){
$('#'+instanceID).insertBefore($('#items li')[$('#'+instanceID+'-order').attr('value')-1]);
} else {
$('#'+instanceID).insertAfter($('#items li')[$('#'+instanceID+'-order').attr('value')-1]);
}
renumberItems();
}

This function function ended up being more complicated than I anticipated. It is called when the user changes the number in the text box. The first thing the function does is gets the current location for the element. We then check that the user didn’t select a number larger than the element list. If they did, we reset the number to be the size of the list. We then double check that this element wasn’t already in the last position and if it is simply return. Next we look to see if they’re trying to move to a lower or higher position. We use this to determine if we should either place it before or after the element currently in the position. Finally, we renumber the items.