Drag, Drop and Insert into Database using AJAX/jQuery in PHP

Submitted by nurhodelta_17 on Tuesday, September 26, 2017 - 13:34.
This tutorial will teach you drag and drop then save the dropped item/s into MySQL Database.

Creating our Database

First step is to create our database. 1. Open phpMyAdmin. 2. Click databases, create a database and name it as test. 3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.
  1. CREATE TABLE `product` (
  2.   `productid` INT(11) NOT NULL AUTO_INCREMENT,
  3.   `product_name` VARCHAR(50) NOT NULL,
  4.   `photo` VARCHAR(150) NOT NULL,
  5. PRIMARY KEY(`productid`)
  6. ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
  7.  
  8. CREATE TABLE `product_drop` (
  9.   `dropid` INT(11) NOT NULL AUTO_INCREMENT,
  10.   `productid` INT(11) NOT NULL,
  11.   `product_name` VARCHAR(30) NOT NULL,
  12. PRIMARY KEY(`dropid`)
  13. ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
dragdrop

Creating our Connection

Next, we create our connection to our database. This will serve as the bridge between our forms and database. We name this as conn.php.
  1. <?php
  2.  
  3. //MySQLi Procedural
  4. $conn = mysqli_connect("localhost","root","","test");
  5. if (!$conn) {
  6.         die("Connection failed: " . mysqli_connect_error());
  7. }
  8.  
  9. ?>

index.php

Next, we create our sample items, drop area, and the drop result together with our jQuery and AJAX codes.
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title>Drag, Drop and Insert into Database using AJAX/jQuery</title>  
  5.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
  6.         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
  7.         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
  8.         <style>  
  9.            .product_drag_area{  
  10.                 width:350px;  
  11.                 height:350px;  
  12.                 border:2px dashed #ccc;  
  13.                 color:#ccc;  
  14.                 line-height:200px;  
  15.                 text-align:center;  
  16.                 font-size:24px;  
  17.            }  
  18.            .product_drag_over{  
  19.                 color:#000;  
  20.                 border-color:#000;  
  21.            }  
  22.         </style>  
  23.       </head>  
  24.       <body>  
  25.         <div class="container">
  26.                         <div style="height: 30px;"></div>
  27.                         <div class="well">
  28.                 <h3 align="center" style="color: blue">Drag, Drop and Insert into Database using AJAX/jQuery</h3>
  29.                                 <div style="height: 20px;"></div>
  30.                                 <div class="row">
  31.                 <?php
  32.                                 include('conn.php');
  33.                                 $query=mysqli_query($conn,"select * from product");
  34.                                 while($row=mysqli_fetch_array($query)){
  35.                                         ?>
  36.                                         <div class="col-lg-4">  
  37.                      <div style="border:1px solid #333; background-color:#f1f1f1; border-radius:5px; padding:16px; cursor:move" align="center">  
  38.                           <img src="<?php echo $row['photo']; ?>" data-id="<?php echo $row['productid']; ?>" data-name="<?php echo $row['product_name']; ?>" class="img-responsive product_drag" style="height:220px; width:150px;">  
  39.                           <h4 class="text-info"><?php echo $row['product_name']; ?></h4>  
  40.                      </div>  
  41.                                         </div>  
  42.                                         <?php
  43.                                        
  44.                                 }  
  45.                 ?>  
  46.                                 </div>
  47.                 <div style="clear:both"></div>
  48.                                 <div style="height:20px"></div>
  49.                                 <div class="row">
  50.                                         <div class="col-lg-4">  
  51.                                                 <div class="product_drag_area">Drop Product Here</div>  
  52.                                         </div>
  53.                                         <div class="col-lg-4">  
  54.                                                 <span style="font-size: 25px;"><strong>Drop Products:</strong></span>
  55.                                                 <div style="height:10px"></div>
  56.                                                 <div id="dragable_product_order"></div>
  57.                                         </div>
  58.                                 </div>
  59.                         </div>
  60.         </div>
  61.       </body>  
  62.  </html>  
  63.  <script>  
  64.         $(document).ready(function(data){
  65.  
  66.                 showDrop();
  67.                
  68.                 $('.product_drag_area').on('dragover', function(){  
  69.                         $(this).addClass('product_drag_over');  
  70.                         return false;  
  71.                 });  
  72.                 $('.product_drag_area').on('dragleave', function(){  
  73.                         $(this).removeClass('product_drag_over');  
  74.                         return false;  
  75.                 });  
  76.                 $('.product_drag').on('dragstart', function(e){  
  77.                         e.originalEvent.dataTransfer.setData('productid', $(this).data('id'));
  78.                         e.originalEvent.dataTransfer.setData('productname', $(this).data('name'));                 
  79.                 });  
  80.                 $('.product_drag_area').on('drop', function(e){  
  81.                         e.preventDefault();  
  82.                         $(this).removeClass('product_drag_over');  
  83.                         var id = e.originalEvent.dataTransfer.getData('productid');
  84.                         var name = e.originalEvent.dataTransfer.getData('productname');
  85.                         $.ajax({  
  86.                 url:"action.php",  
  87.                 method:"POST",  
  88.                 data:{
  89.                                         id:     id,
  90.                                         name: name,
  91.                                         action: 1,
  92.                                 },  
  93.                 success:function(){  
  94.                     showDrop();
  95.                 }  
  96.                         })  
  97.                 });  
  98.         });
  99.        
  100.         function showDrop(){
  101.                 $.ajax({  
  102.             url:"fetch_drop.php",  
  103.             method:"POST",  
  104.             data:{
  105.                                 fetch: 1,
  106.                         },  
  107.             success:function(data){  
  108.                 $('#dragable_product_order').html(data);  
  109.             }  
  110.                 })
  111.         }
  112.  </script>

action.php

This is our code in adding the drop item into our database.
  1. <?php  
  2.         include('conn.php');   
  3.         if(isset($_POST['action'])){  
  4.                 $id=$_POST['id'];
  5.                 $name=$_POST['name'];
  6.                
  7.                 mysqli_query($conn,"insert into product_drop (productid, product_name) values ('$id', '$name')");
  8.                
  9.         }  
  10. ?>  

fetch_drop.php

Lastly is our code in selecting the drop item/s from our database.
  1. <?php
  2.         include('conn.php');
  3.         if(isset($_POST['fetch'])){
  4.                 $query=mysqli_query($conn,"select * from product_drop order by dropid desc");
  5.                 while($row=mysqli_fetch_array($query)){
  6.                         ?>
  7.                         <div><?php echo $row['product_name'] ?></div>
  8.                         <?php
  9.                 }
  10.         }
  11.  
  12. ?>
And that ends this tutorial. If you have any comments or questions, feel free to message me or comment below. Happy Coding :)
Tags
php
MySQLi
AJAX
jQuery
Drag and drop
drag
Drop
drop and drop and insert to database

Add new comment

About text formats
  • 2009 views