Fancytree -Drag'n'drop and Save order

Here I am going to integrate 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.

7. Put this below code in javascript section.

8. Now create one <div> in body section of page.

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.

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.

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.

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

1. Bhavin Patel
2. Nrupen Desai

You can drop comment for any questions or feedback. We will get back to you soon.

For more such technical blogs, visit us http://www.solutionanalysts.com/blog