javascript - Sending and deleting records to database with a drag and drop table -

i have 3 db tables.

-paid

-partially paid

-owes

when registers account send user_id, name, etc 'owes' db table , output name drag , drop table have in 'owes' column. of if move anyone's name other category (paid/partially paid) not sure how delete record owes db , insert name new db table changes permanent.

what's throwing me off how drag , drop table. i'm not sure how apply logic when dropped column past record deleted , new 1 added specific table or how make changes without submit button or page reload.

what way can , how structure it?

php

<?php //payment section      $con = mysqli_connect("localhost", "root", "", "db");     $paid_run = mysqli_query($con,"select * paid order id desc");     $partially_paid_run = mysqli_query($con,"select * partial_payment order id desc");     $owes_run = mysqli_query($con,"select * owes order id desc");     $paid_numrows = mysqli_num_rows($paid_run);     $partially_paid_numrows = mysqli_num_rows($partially_paid_run);     $owes_numrows = mysqli_num_rows($owes_run);          if($paid_numrows > 0){             while($row = mysqli_fetch_assoc($paid_run)){                 $paid_id = $row['user_id'];                 $paid_name = $row['name'];             }         }      if($partially_paid_numrows > 0){             while($row = mysqli_fetch_assoc($partially_paid_run)){                 $partially_paid_id = $row['user_id'];                 $partially_paid_name = $row['name'];                 $partially_paid_amount = $row['payment'];             }         }      if($owes_numrows > 0){             while($row = mysqli_fetch_assoc($owes_run)){                 $owes_id = $row['user_id'];                 $owes_name = $row['name'];             }         } ?>   $(function() {     $( "#paid, #partially_paid, #owes" ).sortable({       connectwith: ".tdpayment",       remove: function(e, ui) {         var $this = $(this);         var childs = $this.find('div');         if (childs.length === 0) {            $this.text("nothing");         }       },       receive: function(e, ui) {         $(this).contents().filter(function() {             return this.nodetype == 3; //node.text_node          }).remove();       },     }).disableselection();   }); 

table

<table class="paymenttable" id="dragtable">         <tr>             <th class="thpayment">paid</th>             <th class="thpayment">partially paid</th>             <th class="thpayment">owes</th>         </tr>         <tr>             <td class="tdpayment" id="paid">                             <div>             <?php                 if ($paid_name == true) {                     echo $paid_name;                 } else {                     echo "no 1 has paid";                 }             ?>                             </div>             </td>             <td class="tdpayment" id="partially_paid">             <div>             <?php                  if ($partially_paid__name == true) {                     echo $partially_paid__name . " - " . $partially_paid_amount;                 } else {                     echo "no 1 has made partial payment";                 }             ?>               </div>             </td>             <td class="tdpayment" id="owes">             <div>             <?php                 if ($owes_name == true) {                     echo $owes_name;                 } else {                     echo "everyone has paid something";                 }             ?>               </div>             </td>         </tr>     </table> 

here's rough outline on how it. recommend using jquery, javascript library has lot of useful stuff this.

1. implement drag , drop part using jquery draggable , droppable. nice guide can found here.
2. write php page updates database way want it.
3. use jquery call page when dropped. can done using ajax.

clarification of part 3

i recommend looking @ photo manager in droppable documentation full working example of similar.

for work, need set html has class names , data attributes:

<h1>owes</h1> <div class="bin" data-bin-id="1">   <div class="user" data-user-id="5">eva</a>   <div class="user" data-user-id="8">anna</a> </div>  <h1>partially paid</h1> <div class="bin" data-bin-id="2">   <div class="user" data-user-id="2">tom</a>   ... </div>  ... 

then need implement javascript takes care of calling php when user drops something:

jquery(".bin").droppable({   accept: ".user",   drop: function( event, ui ) {      //get id of bin user dropped into.     var intbinid = jquery(this).attr("data-bin-id");      //get id of user dropped.     var intuserid = ui.droppable.attr("data-user-id");      //make ajax call php page.     jquery.ajax("update.php?binid=" + intbinid + "&userid=" + intuserid);    } }); 

in addition might want update.php return let javascript know if worked or not, , if failed abort drop.

disclaimar: since don't have parts of project set up, have not tested code.