Jquery drag and drop save to database php

Jquery drag and drop save to database php

jquery drag and drop save to database php : -

In this post you learn how to change order of row in view table and save it to database by using jquery,jquery ui and php mysql.

create database phpcooker_script and import this

-- Database: `phpcooker_script`

-- --------------------------------------------------------

-- Table structure for table `position`

  `position_id` int(10) NOT NULL AUTO_INCREMENT,
  `position_title` varchar(120) NOT NULL,
  `position_description` text NOT NULL,
  `position_order` int(11) NOT NULL,
  `position_status` enum('0','1') NOT NULL,
  PRIMARY KEY (`position_id`)

-- Dumping data for table `position`

INSERT INTO `position` (`position_id`, `position_title`, `position_description`, `position_order`, `position_status`) VALUES
(1, 'What is PHP ', 'is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML', 6, '1'),
(2, 'What is C ', 'C is a computer programming language. That means that you can use C to create lists of instructions for a computer to follow', 2, '1'),
(3, 'What is c++ ', 'C++ is a general-purpose object-oriented programming (OOP) language, developed by Bjarne Stroustrup, and is an extension of the C language', 4, '1'),
(4, 'What is java ', 'Java is a programming language and computing platform first released by Sun Microsystems in 1995.', 3, '1'),
(5, 'What is javascript ', 'Javascript is a dynamic computer programming language. It is lightweight and most commonly used', 1, '1'),
(6, 'What is HTML ', 'HTML is the standard markup language for creating Web pages.', 5, '1');

creat index.php

$db = new db();
<!DOCTYPE html>
<html lang="en">
  <title>jquery drag and drop save to database php</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  $(function() {
    $( ".row_position" ).sortable({
        delay: 150,
        change: function() {
    var selectedLanguage = new Array();
    $('.row_position>tr').each(function() {
    document.getElementById("row_order").value = selectedLanguage;
  function save() { 
    var data = new Array();
    $('.row_position tr').each(function() {
            alert('your change successfully saved');

<div class="container">   
<h1>Jquery drag and drop save to database php</h1>    
  <table class="table">
    <tbody class="row_position" >
     $data_lists = $db->select('position',"order by position_order asc");
     foreach($data_lists as $data_list){
      <tr id="<?php echo $data_list['position_id']; ?>" >
        <td  ><?php echo $data_list['position_id']; ?></td>
        <td><?php echo $data_list['position_title']; ?></td>
        <td><?php echo $data_list['position_description']; ?></td>
     <?php } ?>
<div style="text-align:center;" >  
<input type="submit" class="btn btn-primary"   onClick="save();" />



$db = new db();
$position = $_POST['position'];
foreach($position as $k=>$v){
    $data = array(
    $db->update("position",$data,"where position_id='".$v."'");


download full code from here  smileysmileysmileysmiley 


Download Hare

Total Coments (0)