- Home
- >
- Ecommerce Development
- >
- Update Drag’n’drop and Save order – Solution Analysts
Drag’n’drop and Save order – Solution Analysts is an article sent to you by the InApps editorial team. Hope readers will have more useful knowledge at www.inapps.net
You are viewing the article: Drag’n’drop and Save order – Solution Analysts
We are going to demonstrate integration of Fancytree and functionality that save the order according drag’n’drop in fancytree.
Steps for how to create Fancytree and save order according drag’n’drop.
Steps :
1. Download Fancytree plugin from the below url
http://plugins.jquery.com/fancytree
2. Extract that downloaded folder and put it in your xampp->htdocs-> or virtual host folder(I have put in my virtual host folder name examples).
3. Rename this folder like Fancytree and open it.
4. We don’t need all contents from it. We need only following files.
a. fancytree \src\skin-xp
b. src/jquery.fancytree.js
c. src/jquery.fancytree.dnd.js
d. src/jquery.fancytree.edit.js
e. src/skin-xp/ui.fancytree.css
5. Apart from that, we need two jQuery files.
a. jquery.js http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js
b. jquery-ui.js http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js
6. Now create one PHP file. I have created createtree.php
Insert following content in head section of this page.
| <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js” type=”text/javascript”></script> | |
| <script src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js” type=”text/javascript”></script> | |
| <link href=”src/skin-xp/ui.fancytree.css” rel=”stylesheet” type=”text/css”> | |
| <script src=”src/jquery.fancytree.js” type=”text/javascript”></script> | |
| <script src=”src/jquery.fancytree.dnd.js” type=”text/javascript”></script> | |
| <script src=”src/jquery.fancytree.edit.js” type=”text/javascript”></script> |
view rawdndjavascript hosted with ❤ by GitHub
7. Put this below code in javascript section.
| $(function(){ | |
| $(“#tree”).fancytree({ | |
| extensions: [“dnd”, “edit”], | |
| dnd: { | |
| autoExpandMS: 400, | |
| focusOnClick: true, | |
| preventVoidMoves: true, // Prevent dropping nodes ‘before self’, etc. | |
| preventRecursiveMoves: true, // Prevent dropping nodes on own descendants | |
| dragStart: function(node, data) { | |
| return true; | |
| }, | |
| dragEnter: function(node, data) { | |
| if(node.parent !== data.otherNode.parent){ | |
| return false; | |
| } | |
| return [“before”, “after”]; | |
| },//dragenter end | |
| dragDrop: function(node, data) { | |
| data.otherNode.moveTo(node, data.hitMode); | |
| }, | |
| dragStop: function(node, data) { | |
| } | |
| },//DND END | |
| activate: function(event, data) { | |
| }, | |
| });//fancy tree end | |
| });//function end |
view rawjquerydnd hosted with ❤ by GitHub
8. Now create one <div> in body section of page.
| <div id=”tree”> | |
| </div> |
view rawhtm hosted with ❤ by GitHub
9. You can add your code in this above div as per requirement. I have added this code which came from database.
Data coming from three different table.
1. topcategory
2. subcategory
– id field from topcategory table reference as foreign key in subcategory table filed topcategory_id
3. questions
– id filed from subcategory table reference as foreign key in question table filed subcategory_id
Here data display through three array $questionaire, $category, $question.
| <div id=”tree”> | |
| <ul> | |
| <?php foreach($questionaire as $keyque => $dataque) { ?> | |
| <li id=”<?php echo $keyque; ?>”> <?php echo $dataque; ?> | |
| <ul> <?php foreach($category[$keyque] as $keycat => $datacat) { ?> | |
| <li id=”<?php echo $keycat; ?>”><?php echo $datacat?> | |
| <ul><?php foreach($question[$keycat] as $keyqun => $dataqun) { ?> | |
| <li id=”<?php echo $keyqun; ?>”> <?php echo $dataqun; ?> | |
| </li> | |
| <?php }?> | |
| </ul></li> | |
| <?php }?> | |
| </ul> | |
| </li> | |
| <?php }?> | |
| </ul> | |
| </div> |
view rawcreateeplan.php hosted with ❤ by GitHub
10. Now open your browser and open the php/html file.
– for me it is: http://examples/fancytree/createtree.php
11. You can see the fancytree structure with your data.
If you have any requirement to save order using drag’n’drop then follow the simple steps.
1. We need one field name like order_number in table from where data come. order_number store order of data. I have added order_number in questions table.
2. We have to fetch data from table by order(In order of order_number).
3. Now add following code in dragStop event of fancytree in Javascript.
| dragDrop: function(node, data) { | |
| data.otherNode.moveTo(node, data.hitMode); | |
| }, | |
| dragStop: function(node, data) { | |
| var neworder=new Array(); | |
| var i=0; | |
| var all_drop_data = node.getParent(); | |
| all_drop_data.visit(function(all_drop_data){ | |
| neworder[i]=all_drop_data.key; | |
| i++; | |
| }); | |
| } |
view rawdndjavascript hosted with ❤ by GitHub
4. You can see in above code, there is a array named as “neworder” that contains new order numbers of our data.
5. Here we can call one ajax with data using “neworder” array which actually has new order and we can update data’s order number in table.
| dragStop: function(node, data) { | |
| var neworder=new Array(); | |
| var i=0; | |
| var all_drop_data = node.getParent(); | |
| all_drop_data.visit(function(all_drop_data){ | |
| neworder[i]=all_drop_data.key; | |
| i++; | |
| }); | |
| console.log(neworder); | |
| $.ajax({ | |
| url:”update_tree_order.php”, | |
| type:”POST”, | |
| data:”data = “+neworder + “&name=bhavin”, | |
| success:function(result){ | |
| } | |
| });//ajax end | |
| } | |
| },//DND END | |
| activate: function(event, data) { | |
| }, |
view rawcreatetree.php hosted with ❤ by GitHub
| $allarray=explode(‘,’,$_POST[“data_”]); | |
| foreach ($allarray as $aarray) | |
| { | |
| $sql=”UPDATE questions set order_number = “.$i.” where name=””.trim($aarray).”‘”; | |
| $result=mysql_query($sql); | |
| $i++; | |
| } |
view rawupdate_tree_order.php hosted with ❤ by GitHub
Notes : For this example, we have changed the order at the third level data and store those data’s order in table.
You can add/use extra options from here as well. GIT-URL
Contributors: Bhavin Patel / Nrupen Desai
You can drop comment for any questions or feedback. We will get back to you soon.
Follow this to make sure you’ve got Drag’n’drop and Save order – Solution Analysts. Save and share with those around you these extras.
To learn more about ECOMMERCE DEVELOPMENT
Contact us:
www.inapps.net
Let’s create the next big thing together!
Coming together is a beginning. Keeping together is progress. Working together is success.
