Multilevel Drag and Drop Sortable Tree Structure Using PHP

  1. First let see the table structure
category_id : primary key
category_name : varchar
category_parent :  foreign key 
category_order :  integer

2. Assuming you have done database connection

3.Create Recursive Function

function catgeory_view($id=0) // Recursive function
{
  global $con;
  $select_category="SELECT * FROM store_categories WHERE category_parent=$id ORDER BY category_order";
  $result_category=mysqli_query($con,$select_category);
  $output="";
  if($result_category)
  {
    $row_count=mysqli_num_rows($result_category);
    if($row_count>0)
    {
      $output.="<ul class='space'>";
      while($row_data=mysqli_fetch_array($result_category))
      {
            $output.="<li class='route move_class".$row_data['category_id']."' data-category='".$row_data['category_id']."' data-parrent='".$id."' ><h4 class='title' >".$row_data['category_name']."</h4><span class='ui-icon ui-icon-arrow-4-diag pull-right'></span>".catgeory_view($row_data['category_id'])." </li>"; 
      }
      $output.="</ul>";    
    }
    else 
    {
        $output.="<ul class='space'></ul>";
    }
  }
  return $output;
}

4. And now display Tree/Hierarchy structure category’s by calling Recursive Function

<!-- Multi Level Category Tree structure start -->
<ul class='normal space first-space'>
    <?php
    $select_category="SELECT * FROM store_categories WHERE category_parent IS NULL ORDER BY category_order ";
    $result_category=mysqli_query($con,$select_category);
    $output="";
    if($result_category)
    {
      $row_count=mysqli_num_rows($result_category);
      if($row_count>0)
      {
        while($row_data=mysqli_fetch_array($result_category))
        {
            $output.= "<li  class='route move_class".$row_data['category_id']."' data-category='".$row_data['category_id']."' data-parrent='".$row_data['category_parent']."'  ><h4 class='title'><span class='ui-icon ui-icon-arrow-4-diag'></span>".$row_data['category_name']."</h4>
            ".catgeory_view($row_data['category_id'])."</li>";
            
        }
      }
    }
    echo $output;
    ?>
</ul>
<!-- END -->

5. Create a function that update the sort-order and parent id in database through AJAX

// Update Category 
  function update_category_id(category_parent,category_id,action='update',category_order)
  { 
    $.ajax({
      type: 'POST',
      url: 'update_caetegory.php',
      data: {category_parent:category_parent,category_id:category_id,action:action,category_order:category_order}
    }).done(function(data) {
      // alert(data);
      location.reload(true);
    }).fail(function(data) {
      alert('data');
    });
  }
//END

6. Call the {update_category_id} function

function end(evt) {
        console.log('touchend');
     
        window.clearTimeout(scrolltimeout);

        if (options.dragstop) {
            options.dragstop.call($reference, evt, lastpos);
        }
        var $id=$reference.attr('data-category');
        $reference.removeClass('dragging');
        $reference.trigger('dragstop');
        console.log($reference.parent().children().length);
        var category_order=[];
       
        $( $reference.parent().children() ).each(function(index ) {
            category_order[index]=$( this ).attr('data-category');
                   });
        console.log(category_order);  
        origin = false;
        lastpos = false;
        $reference = false;
       
        //unbinding of event listeners
        $(document)
        .off('.dragaware');
        console.log($id);
        // var category_order=$('.move_class'+$id).index();
        var  category_var=$('.move_class'+$id).parents('li').attr('data-category');
        if(category_var == null) {
            category_var='NULL';
        }
        console.log(category_var);
        var action='update'
        update_category_id(category_var,$id,action,category_order)
        
        return false;
    }

Add a Comment

Your email address will not be published. Required fields are marked *