https://github.com/programmer-blog/jquery-drag-drop-todo-List-with-php-mysql
Last updated
Bước 1: Tạo dbconn.php
C:\xampp\htdocs\php\dbconn.php
<?php
$host = "localhost";
$user = "root";
$password = "";
$database = "tests";
$mysqli = new mysqli($host, $user, $password, $database);
// Check connection
if ($mysqli->connect_errno) {
echo "Failed to connect to MySQL: " . $mysqli->connect_error;
exit();
}Bước 2: Chuẩn bị giao diện
C:\xampp\htdocs\php\index.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Drag and Drop TODO List with PHP MySQL</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.li_containers {
width: 52%;
float: left;
}
.listitems {
width: 150px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
border: 1px solid black;
font-weight: normal;
}
#droppable {
width: 550px;
height: 550px;
padding: 0.5em;
float: right;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<p>
</p>
<h2 align="center">jQuery Drag and Drop TODO List with PHP MySQL</h2>
<p></p>
<div class="li_containers">
<div class="ui-widget-content listitems ui-draggable ui-draggable-handle" data-itemid="6" style="position: relative;">
<p><strong>Write and Article</strong></p>
<hr>
<p>Write an article for the blog</p>
</div>
<div class="ui-widget-content listitems ui-draggable ui-draggable-handle" data-itemid="5" style="position: relative;">
<p><strong>Cooking</strong></p>
<hr>
<p>Do cooking this weekend</p>
</div>
</div>
<div id="droppable" class="ui-widget-header ui-droppable">
<div class="listitems ui-draggable ui-draggable-handle" style="position: relative;">
<p><strong>Go for Running</strong></p>
<hr>
<p>In morning go out to park for running</p>
</div>
<div class="listitems ui-draggable ui-draggable-handle" style="position: relative;">
<p><strong>Buy Books</strong></p>
<hr>
<p>Buy books from market</p>
</div>
<div class="listitems ui-draggable ui-draggable-handle" style="position: relative;">
<p><strong>Watch Movie</strong></p>
<hr>
<p>After Shopping, go to Cinema and watch movie</p>
</div>
<div class="listitems ui-draggable ui-draggable-handle" style="position: relative;">
<p><strong>Shopping</strong></p>
<hr>
<p>Go for shopping on weekend</p>
</div>
</div>
</body>
</html>Bước 3: Lấy itemid
Bước 4: Viết file update status
C:\xampp\htdocs\php\update_item_status.php
<?php
require_once 'dbconn.php';
if(isset($_POST) && isset($_POST['itemid'])) {
$itemid = $_POST['itemid'];
$sql = "UPDATE listitems SET is_completed='yes' WHERE id=$itemid";
if ($mysqli->query($sql) === TRUE) {
echo json_encode($_POST);
} else {
echo "Error updating record: " . $mysqli->error;
}
$mysqli->close();
}
?>Bước 5: Viết cơ bản chức năng
C:\xampp\htdocs\php\index.php
<?php
require_once 'dbconn.php';
if ($mysqli->connect_errno) {
echo "Failed to connect to MySQL: " . $mysqli -> connect_error;
exit();
}
$sql = "SELECT name, detail FROM listitems WHERE is_completed='yes'";
$sql2 = "SELECT id, name, detail FROM listitems WHERE is_completed='no'";
$result = $mysqli->query($sql);
$result2 = $mysqli->query($sql2);
$results = array();
$results2 = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$results[] = $row;
}
} else {
echo "0 results";
}
if ($result2->num_rows > 0) {
while($row = $result2->fetch_assoc()) {
$results2[] = $row;
}
} else {
echo "0 results";
}
$mysqli->close();
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Drag and Drop TODO List with PHP MySQL</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.li_containers {
width: 52%;
float: left;
}
.listitems {
width: 150px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
border: 1px solid black;
font-weight: normal;
}
#droppable {
width: 550px;
height: 550px;
padding: 0.5em;
float: right;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<p>
</p>
<h2 align="center">jQuery Drag and Drop TODO List with PHP MySQL</h2>
<p></p>
<div class="li_containers">
<?php foreach ($results2 as $value): ?>
<div class="ui-widget-content listitems ui-draggable ui-draggable-handle" data-itemid="<?php echo $value['id']; ?>" style="position: relative;">
<p><strong><?php echo $value['name']; ?></strong></p>
<hr>
<p><?php echo $value['detail']; ?></p>
</div>
<?php endforeach ?>
</div>
<div id="droppable" class="ui-widget-header ui-droppable">
<?php foreach ($results as $value): ?>
<div class="listitems ui-draggable ui-draggable-handle" style="position: relative;">
<p><strong><?php echo $value['name']; ?></strong></p>
<hr>
<p><?php echo $value['detail']; ?></p>
</div>
<?php endforeach ?>
</div>
<script type="text/javascript">
$( ".listitems" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
var itemid = ui.draggable.data('itemid');
$.ajax({
url: 'update_item_status.php',
type: 'POST',
dataType: 'json',
data: {itemid: itemid}
})
.done(function(success) {
console.log(success);
});
}
});
</script>
</body>
</html>C:\xampp\htdocs\php\index.php
<?php
require_once 'dbconn.php';
$sqlIncomplete = "SELECT id, name, detail, is_completed FROM listitems where is_completed = 'no' ORDER BY id desc";
$result = mysqli_query($conn, $sqlIncomplete);
//Fetch all imcomplete list items
$incomleteItems = mysqli_fetch_all($result, MYSQLI_ASSOC);
//Get incomplete items
$sqlCompleted = "SELECT id, name, detail, is_completed FROM listitems where is_completed = 'yes' ORDER BY id desc";
$completeResult = mysqli_query($conn, $sqlCompleted);
//Fetch all complted items
$completeItems = mysqli_fetch_all($completeResult, MYSQLI_ASSOC);
//Free result set
mysqli_free_result($completeResult);
mysqli_free_result($result);
mysqli_close($conn);
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Drag and Drop TODO List with PHP MySQL</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
.li_containers {
width: 52%;
float: left;
}
.listitems {
width: 150px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
border: 1px solid black;
font-weight: normal;
}
#droppable {
width: 550px;
height: 550px;
padding: 0.5em;
float: right;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<p>
<h2 align="center">jQuery Drag and Drop TODO List with PHP MySQL</h2>
</p>
<div class="li_containers">
<?php foreach ($incomleteItems as $key => $item) {?>
<div class="ui-widget-content listitems" data-itemid=<?php echo $item['id'] ?>>
<p><strong><?php echo $item['name'] ?></strong></p>
<hr />
<p><?php echo $item['detail'] ?></p>
</div>
<?php }?>
</div>
<div id="droppable" class="ui-widget-header">
<?php foreach ($completeItems as $key => $citem) {?>
<div class="listitems">
<p><strong><?php echo $citem['name'] ?></strong></p>
<hr />
<p><?php echo $citem['detail'] ?></p>
</div>
<?php }?>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$(".listitems").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
$(this).addClass("ui-state-highlight");
var itemid = ui.draggable.attr('data-itemid')
$.ajax({
method: "POST",
url: "update_item_status.php",
data: {
'itemid': itemid
},
}).done(function(data) {
var result = $.parseJSON(data);
});
}
});
});
</script>
</body>
</html>C:\xampp\htdocs\php\dbconn.php
<?php
$host = "localhost";
$username = "root";
$password = "";
$dbname = "tests";
$conn = new mysqli($host, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection to database failed: " . $conn->connect_error);
}C:\xampp\htdocs\php\update_item_status.php
<?php
require_once('dbconn.php');
$itemid = intval($_POST['itemid']);
//SQL query to get results from database
$sql = "update listitems set is_completed = 'yes' where id = $itemid";
$conn->query($sql);
$conn->close();
//send a JSON encded array to client
echo json_encode(array('success'=>1));
