article

Thursday, November 8, 2018

Dynamic Drag’n Drop With jQuery And PHP

Dynamic Drag’n Drop With jQuery And PHP

Database Table

CREATE TABLE IF NOT EXISTS `dragdrop` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`text` varchar(255) DEFAULT NULL,
`listorder` int(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;


Records

INSERT INTO `dragdrop` (`id`, `text`, `listorder`) VALUES
(1, 'Ajax', 4),
(2, 'Jquery', 2),
(3, 'PHP', 3),
(4, 'Mysql', 1),
(5, 'Javascript', 7),
(6, 'CSS', 6),
(7, 'HTML', 5);

<!DOCTYPE html>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
//dynamic-dragn-drop-with-jquery-and-php.php
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Drag Drop With jQuery ui,PHP and Mysqli</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
ul {
 padding:0px;
 margin: 0px;
}
#response {
 padding:10px;
 background-color:#9F9;
 border:2px solid #396;
 margin-bottom:20px;
}
#list li {
 margin: 0 0 3px;
 padding:8px;
 background-color:#00CCCC;
 color:#fff;
 list-style: none;
 border: #CCCCCC solid 1px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){ 
   function slideout(){
  setTimeout(function(){
  $("#response").slideUp("slow", function () {
 });
 }, 2000);
 }
  
   $("#response").hide();
   $(function() {
  $("#list ul").sortable({ opacity: 0.8, cursor: 'move', update: function() {
    var order = $(this).sortable("serialize") + '&update=update';
    $.post("updateList.php", order, function(theResponse){
  $("#response").html(theResponse);
  $("#response").slideDown('slow');
  slideout();
    });               
   }        
    });
   });
 
});
</script>
</head>
<body>
<div id="container" style="width:300px;">
 <div id="list">
 <div id="response"> </div>
   <ul>
     <?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
    die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
$results = $conn->query("SELECT id, text FROM dragdrop ORDER BY listorder ASC");
 while($row = $results->fetch_assoc()) {
  $id=$row['id'];
  $text=$row['text'];
    ?>
     <li id="arrayorder_<?php echo $id ?>"><?php echo $id?> <?php echo $text; ?>
       <div class="clear"></div>
     </li>
     <?php } ?>
   </ul>
 </div>
</div>
</body>
</html>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//updatelist.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
    die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
$array = $_POST['arrayorder'];
 
if ($_POST['update'] == "update"){
  
 $count = 1;
 foreach ($array as $idval) {
  $sql = "UPDATE dragdrop SET listorder = " . $count . " WHERE id = " . $idval;
  if ($conn->query($sql) === TRUE) {
  echo "Record updated successfully";
 } else {
  echo "Error updating record: " . $conn->error;
 }
  $count ++;
 }
 echo 'All saved! refresh the page to see the changes';
}
?>

Posted by ednalan at 9:00 AM . Under .

Related Post