|
JQuery Sortable Drag and Drop lists and a server side AJAX save |
||||||||
This article explains how you can use a few JQuery interactions to create a sortable drag and drop list and save its state to a server side processing template.
Firstly you must include a series of JQuery script files. These are the core files and a collection of interaction manager files, things like mouse.js, sortable.js, draggable.js and droppable.js.
2
3<s/cript src="jquery.ui.core.js"></script>
4<s/cript src="jquery.ui.widget.js"></script>
5
6<s/cript src="jquery.ui.mouse.js"></script>
7<s/cript src="jquery.ui.draggable.js"></script>
8<s/cript src="jquery.ui.droppable.js"></script>
9<s/cript src="jquery.ui.sortable.js"></script>
Next create two div elements. The first of which holds our list of items. This is a html list that holds each item. I've also given each item in the list a unique id as this will be used as our item reference later on, to save back to the server.
The second div element is a sortable list. This list will hold our dragged items.
2 <ul>
3 <li class="draggable" id="bread">
4Bread <img src="bread.png" class="img-float">
5</li>
6 <li class="draggable" id="milk">
7Milk <img src="milk.jpg" class="img-float">
8</li>
9 <li class="draggable" id="cheese">
10Cheese <img src="cheese.gif" class="img-float">
11</li>
12 <li class="draggable" id="oranges">
13Oranges <img src="orange.gif" class="img-float">
14</li>
15 </ul>
16
17</div>
18
19<ul id="sortable" class="sortable"></ul>
This will give us a list and an empty area with no interaction at all. To allow the list items to be dragged and the sortable area to accept and hold them we need to write a function that uses their selectors as identifiers for the JQuery interactions.
The code below has a selector of 'draggable' to enable the list items to be dragged around. It also uses the 'connectToSortable' value to pair it with the 'sortable' div element. Only by doing this do we allow the two div's to interact.
The first function uses the 'sortable' class to enabling sorting and dropping on the corresponding div. It also has an 'update' event that fires whenever its internal list is updated. This creates an Array of the list items and fires them through an AJAX request to a server side template where you can process them however you want.
For demo purposes I am also alerting() the list item values.
2 $(function() {
3 $( "#sortable" ).sortable({ revert: true,
4
5 update: function( event, ui ) {
6
7 var basketItems = $(this).sortable('toArray').toString();
8 alert(basketItems);
9 $.get('updatebasket.cfm', {basketItems:basketItems});
10
11 }
12
13 });
14
15 $( ".draggable" ).draggable({
16 connectToSortable: "#sortable",
17 helper: "clone",
18 revert: "invalid"
19 });
20
21 $( "ul, li" ).disableSelection();
22 });
23 </script>
It seems like a pretty flexible way of creating a shopping basket or sorting system but I've yet to find anywhere to use it in a production environment.
There is a demo of this working here: http://www.mccran.co.uk/examples/jquery-multi-drag-drop/
Also, (ok two questions), how can you save the built list in the exact order as it was filled?