Blockbuster Like Drag and Drop Sorting with jQuery – Pt 1

Recently, I was faced with the task of creating an interface that allows a user to sort content in a similar fashion to the Blockbuster online queueing system. The Key features of this system are the ability to sort items via drag and drop, via altering the sort order number for the item in a text box or via a ‘move to top’ button. In addition there is the ability to remove an item from the sort and for my purposes I created a ‘move to bottom’ button.

I implemented these features using the jQuery framework.

In a follow up post I’ll breakdown this code piece by piece, show the serialization of this data and the ability to add items to the list. But for now, I just wanted to get this code out there.

Here’s the code:

<html>
<head>
<title>
jQuery Blockbuster Sorting Example
</title>

<script type="text/javascript" src="/admin/includes/jquery.js" ></script>
<script type="text/javascript" src="/assets/js/ui/ui.core.js"></script>
<script type="text/javascript" src="/assets/js/ui/ui.draggable.js"></script>
<script type="text/javascript" src="/assets/js/ui/ui.droppable.js"></script>
<script type="text/javascript" src="/assets/js/ui/ui.sortable.js"></script>

<script type="text/javascript">
$(function() {
$("#items").sortable({
items: 'li',
cursor: 'move',
stop:     function (){
renumberItems();
}
});

});
function moveUp(instanceID) {
$('#'+instanceID).insertBefore($('#items > li[class!=headerItem][class!=spacerItem]:first'));
renumberItems();
}
function moveDown(instanceID) {
$('#'+instanceID).insertAfter($('#items > li[class!=headerItem][class!=spacerItem]:last'));
renumberItems();
}

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

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

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

</script>

</head>
<body>
<ul id="items">

<li id="1"><a href="#" onClick="moveUp(1);return false;" title="Send this item to the top">Send To Top</a> <a href="#" onclick="moveDown('1');return false;" title="Uncategorize this item">Send To Bottom</a>
<input onchange="reOrderItems(1)" type="text" name="Order1" id="1-order" value="1" size="5">
A very good movie
<a href="##" onClick="removeItem(1);return false;">Remove Item</a>

</li>

<li id="2"><a href="#" onClick="moveUp(2);return false;" title="Send this item to the top">Send To Top</a> <a href="#" onclick="moveDown('2');return false;" title="Uncategorize this item">Send To Bottom</a>
<input  onchange="reOrderItems(2)" type="text" name="2" id="2-order" value="2" size="5">
A good movie
<a href="##" onClick="removeItem(2);return false;">Remove Item</a>
</li>

<li id="3"><a href="#" onClick="moveUp(3);return false;" title="Send this item to the top">Send To Top</a> <a href="#" onclick="moveDown('3');return false;" title="Uncategorize this item">Send To Bottom</a>
<input  onchange="reOrderItems(3)" type="text" name="Order3" id="3-order" value="3" size="5">
An ok movie
<a href="##" onClick="removeItem(3);return false;">Remove Item</a>
</li>

<li id="4"><a href="#" onClick="moveUp(4);return false;" title="Send this item to the top">Send To Top</a> <a href="#" onclick="moveDown('4');return false;" title="Uncategorize this item">Send To Bottom</a>
<input  onchange="reOrderItems(4)" type="text" name="Order4" id="4-order" value="4" size="5">
My wife wanted this movie
<a href="##" onClick="removeItem(4);return false;">Remove Item</a>
</li>
</ul>
</body>
</html>

About this entry

You’re currently reading “Blockbuster Like Drag and Drop Sorting with jQuery – Pt 1,” an entry on Ricky Robinett's Blog

Published:
October 27, 2009 / 4:12 pm
Category:
AJAX
Tags:
,