|
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?
@laxman do you mean that you want the code for the updateBasket.cfm template? The server side code that commits the drag and drop database commit?
Thanks for the great tutorial. I have a couple of questions..
1) Can i have multiple baskets? If yes, how?
2) Once an item is added to a basket, you should not be able to add it again to the same basket.
3) How to remove an item from the basket?
http://www.trustedmontre.com
http://www.businessorganisers.net Establishments take place due to people contact. Societal establishments (spouse and children, group for example. )#) transform patterns throughout the strategy of people progress. Sometimes television, there seemed to be this advancement connected with set managing along with the resultant small business establishments.
http://www.successionbusiness.net Effective businesses are designed with stable thoughts without a doubt. Even so, as a way to keep good in addition to hurtful decrease in dollars, time and energy using a small business strategy, enterprisers need to ensure most of these thoughts usually are stable plenty of to provide the required small business achievements.
buy instagram likes
http://socialgrand.com/buy-instagram-likes/
http://onlineretailers.blogcindario.com/
https://freeamazoncodes2015.wordpress.com/
http://onlinemarketingtrend.angelfire.com/
https://storify.com/Yatipk3344/vbqadv/
http://amazoncodesonline.tumblr.com/
Why and How You Should Go Gluten Free | Natalie Jill
how to get many likes on instagram
http://socialgrand.com/buy-instagram-likes/
<a href="http://worldofgames4u.com/the-walking-dead-no-mans...; target="_blank">http://worldofgames4u.com</a>;
<a href="http://worldofgames4u.com/the-walking-dead-no-mans...; rel="nofollow">The Walking Dead No Man’s Land Hack</a>
http://worldofgames4u.com/the-walking-dead-no-mans...
Es war einfach super, dass es am Anfang gleich so spannend wu
Also, (ok two questions), how can you save the built list in the exact order as it was filled