Draggable Jquery

Hi all,

i have made an application in which i have used the draggable fields. what i actually want is that i want to save the position of the draged section. please help me to solve that problem. my code is as below:-
VIEW:

PHP Code:

 <div class="col-lg-2 connectedSortable">
         <h3>Prospect</h3>
             <?php
    foreach($records as $row)
    { 
    ?>

          <div class="small-box bg-blue">

        
         
        <div class="box box-solid bg-blue ">
            <div class="box-header ui-sortable-handle" style="cursor: move;">
                <h3 class="box-title"><i class="fa fa-user"></i>Leads</h3><br>
                    <h4><?php echo $row->l_name;?></h4>
                    
          <input type="hidden" name="stage" value="<?php echo $row->l_id?>" >
            <a href="<?php echo base_url("admin/leads/leadsdashboard?ids=".$row->l_id); ?>" 
        class="pull-right bg-blue">&nbsp;More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
 
 </div>
            
          <?php if($this->session->flashdata('error')){?>
  <div class="alert alert-danger">
    <?php echo $this->session->flashdata('error')?> 
  <?php } ?>
 
  </div>
    

<?php } ?> 
             
        </div>     

    
      <div class="col-lg-2 connectedSortable">
     <h3>offer</h3>
                     <?php
    foreach($offer as $row)
    { 
    ?>
          <div class="small-box bg-aqua">

    
        <div class="box box-solid bg-aqua ">
            <div class="box-header ui-sortable-handle" style="cursor: move;">
                <h3 class="box-title"><i class="fa fa-user"></i>offer</h3><br>
                        <h4><?php echo $row->l_name;?></h4>
                    
          
            <a href="<?php echo base_url("admin/leads/leadsdashboard?ids=".$row->l_id); ?>" class="pull-right bg-aqua">&nbsp;More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
 
 </div>
            
    
 
             
        </div>    
            <?php }?>
        </div>  

    
       <div class="col-lg-2 connectedSortable">
     <h3>In Negotiation</h3>
                      <?php
    foreach($negotiation as $row)
    { 
    ?>
          <div class="small-box bg-teal">

    
        <div class="box box-solid bg-teal ">
            <div class="box-header ui-sortable-handle" style="cursor: move;">
                <h3 class="box-title"><i class="fa fa-user"></i>In Negotiation</h3><br>
                     
                        <h4><?php echo $row->l_name;?></h4>
          
            <a href="<?php echo base_url("admin/leads/leadsdashboard?ids=".$row->l_id); ?>" class="pull-right bg-teal">&nbsp;More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
 
 </div>
            
    </div>    
    <?php }?>
        </div>  
        
      <div class="col-lg-2  connectedSortable">
         <h3>Closing</h3>
                              <?php
    foreach($closing as $row)
    { 
    ?>
          <div class="small-box bg-orange">

    
        <div class="box box-solid bg-orange ">
            <div class="box-header ui-sortable-handle" >
                <h3 class="box-title"><i class="fa fa-user"></i>Closing</h3><br>
                     <h4><?php echo $row->l_name;?></h4>
                    
          
            <a href="<?php echo base_url("admin/leads/leadsdashboard?ids=".$row->l_id); ?>" class="pull-right bg-orange">&nbsp;More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
 
 </div>
            
    </div>    
    <?php }?>
        </div>  
         <div class="col-lg-2  connectedSortable">
     <h3>Invoicing</h3>
                              <?php
    foreach($invoicing as $row)
    { 
    ?>
          <div class="small-box bg-green">

    
        <div class="box box-solid bg-green ">
            <div class="box-header ui-sortable-handle" style="cursor: move;">
                <h3 class="box-title"><i class="fa fa-user"></i>Invoicing</h3><br>
                     
                    <h4><?php echo $row->l_name;?></h4>
          
            <a href="<?php echo base_url("admin/leads/leadsdashboard?ids=".$row->l_id); ?>" class="pull-right bg-green">&nbsp;More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
 
 </div>
            
    </div>    
    <?php }?>
        </div>  
<script>
        <!-- ./col -->
     $('.connectedSortable').connectedSortable({
    connectWith: '.connectedSortable',
    update: function(event, ui) 
    {
        alert(ui.item.attr('l_id'));
        var id = ui.item.attr('l_id');
        updateDB(id);
    }
});

function updateDB(id) {
    $.ajax({
       //grab script, pass id and update database 
    });
}
</script> 


 
i want to drag the section to other stages and save the value oin database i m not finding a headway how to do that. kindly help.

how can i code for model and controller . just want basic idea. i am not understanding how it can be done.

thanks in advance

See This

What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )

See This

Hi dear,
the boxes arent getting dragged.

Did you download and add the jQuery UI?

You need to incluse it just like jQuery.

What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )

Did you download and add the jQuery UI?

You need to incluse it just like jQuery.

hi dear, 
i need to save the position of the draggable section. and update the database values accrdingly. i have included the jqueries the sections i m able to drag but i need to save the position.

thanks in advance

The d.dragable is were they are saving the json positions to the browser local storage.

You would need to change that to do an ajax call to a method in your controller to save
the positions to the database.

This is for a mouse position you would need to change it to the dragged positions.

Write the php to access a CI Controller method to get and save.

Simple Draggable Element Persistence with jQuery

What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )