Today, We want to share with you jquery drag and drop save to database php.In this post we will show you dynamic drag and drop with jquery and php, hear for drag and drop reorder images using jquery ajax, php mysql we will give you demo and example for implement.In this post, we will learn about drag and drop jquery in php with an example.

PHP – Dynamic Drag and Drop table rows using JQuery Ajax

Contents

Step 1: Create Database Table

SQL Query:

CREATE TABLE IF NOT EXISTS `sorting_items` (

  `id` int(10) NOT NULL AUTO_INCREMENT,
  `title` varchar(120) NOT NULL,
  `description` text NOT NULL,
  `position_order` int(11) NOT NULL,
  PRIMARY KEY (`id`)

) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

Step 2: Create index.php File

Example 2: index.php

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Drag and Drop table rows in PHP Mysql- pakainfo.com</title>
    <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="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
    <div class="container">
        <h3 class="text-center">Dynamic Drag and Drop table rows in PHP Mysql - www.pakainfo.com</h3>
        <table class="table table-bordered">
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Defination</th>
            </tr>
            <tbody class="row_position">
            <?php


            require('db_config.php');


            $sql = "SELECT * FROM sorting_items ORDER BY position_order";
            $users = $mysqli->query($sql);
            while($user = $users->fetch_assoc()){


            ?>
                <tr  id="<?php echo $user['id'] ?>">
                    <td><?php echo $user['id'] ?></td>
                    <td><?php echo $user['title'] ?></td>
                    <td><?php echo $user['description'] ?></td>
                </tr>
            <?php } ?>
            </tbody>
        </table>
    </div> <!-- container / end -->
</body>


<script type="text/javascript">
    $( ".row_position" ).sortable({
        delay: 150,
        stop: function() {
            var selectedData = new Array();
            $('.row_position>tr').each(function() {
                selectedData.push($(this).attr("id"));
            });
            updateOrder(selectedData);
        }
    });


    function updateOrder(data) {
        $.ajax({
            url:"ajaxPro.php",
            type:'post',
            data:{position:data},
            success:function(){
                alert('your change successfully saved');
            }
        })
    }
</script>
</html>

Step 3: Create Database Configuration File

db_config.php

<?php
	$mysqli = new mysqli("localhost", "root", "root", "pakainfo");
?>

Step 4: Create ajaxPro.php File

ajaxPro.php

<?php 

require('db_config.php');

$position = $_POST['position'];

$i=1;
foreach($position as $k=>$v){
    $sql = "Update sorting_items SET position_order=".$i." WHERE id=".$v;
    $mysqli->query($sql);
	$i++;
}

?>

I hope you get an idea about Using jQuery or MooTools For Drag, Drop, Sort, Save.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

PHP – Dynamic Drag and Drop table rows using JQuery Ajax

Step 1: Create Database Table

Step 2: Create index.php File

Step 3: Create Database Configuration File

Step 4: Create ajaxPro.php File

Related posts: