Blog

Latest technology news, trends and developers guide for business application. Visit this space for more tech updates.

Let’s work on your exciting new project together!

Drag’n’drop and Save order

Web Development

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

 

333

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.

333

 
 

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.

5 Things to Remember While Opting for Responsive Web Development Services

Responsiveness is no longer a mere additional feature but a necessity for websites. Responsive design...

Flutter vs React Native: Which One To Choose For Mobile App Development?

When it comes to developing a futuristic cross-platform app, two platforms have created a buzz...

3 Web Development Trends to Watch-Out for in 2016-17

As we progress through half of this year and well into the next year, we...

We are always happy to hear from you - Share your business requirements. Our business experts will reach you shortly

 

Select Your Requirement

Secure : We'll ensure, all the information provided by you will not be shared with anyone and your details are completely safe.

We respect your privacy. *Privacy Policy

Select Your Requirement

Secure : We'll ensure, all the information provided by you will not be shared with anyone and your details are completely safe.

We respect your privacy. *Privacy Policy