我想创建一个网页，这样我就可以通过将人员拖动到区域中来为人员分配访问区域，并更新数据库中的区域。
我设法使用拖放javascript和检索数据库中的人的列表。
但我想找到最佳的方式来排序的人在正确的框时，页面加载，然后我希望能够改变在Mysql数据库中的区号时，一个人是下降到一个区域。
See Image
下面是我目前的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>📌 Drag and Drop</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main class="board">
<div class="column column-zone1" ondrop="drop(event)" ondragover="allowDrop(event)">
<h2>Zone 1</h2>
<div class="container">
<table>
<div class="column column-ip" ondrop="drop(event)" ondragover="allowDrop(event)">
<?php include('EmployesDrag.php')
?>
</div>
</table>
</div>
</div>
<div class="column column-zone2" ondrop="drop(event)" ondragover="allowDrop(event)">
<h2>Zone 2</h2>
</div>
<div class="column column-zone3" ondrop="drop(event)" ondragover="allowDrop(event)">
<h2>Zone 3</h2>
</div>
</main>
<script src="js/DragDrop.js"></script>
</body>
</html><?php
//connexion à la base de donnée
include_once "connexion.php";
//requête pour afficher les infos d'un employé
$sql="SELECT prenom , nom FROM personnel";
$result=mysqli_query($con,$sql);
if ($result)
{
// Return the number of rows in result set
$rowcount=mysqli_num_rows($result);
}
if($rowcount == 0){
//s'il n'existe pas d'employé dans la base de donné , alors on affiche ce message :
echo "Il n'y a pas encore d'employé ajouter !" ;
}else {
//si non , affichons la liste de tous les employés
while($row=$result->fetch_assoc()){
?>
<tr>
<article class="card" draggable="true" ondragstart="drag(event)" data-id="1"><?=$row['nom']?></td>
</tr>
<?php
}
// Free result set
mysqli_free_result($result);
}
?>const dragStart = target => {
target.classList.add('dragging');
};
const dragEnd = target => {
target.classList.remove('dragging');
};
const dragEnter = event => {
event.currentTarget.classList.add('drop');
};
const dragLeave = event => {
event.currentTarget.classList.remove('drop');
};
const drag = event => {
event.dataTransfer.setData('text/html', event.currentTarget.outerHTML);
event.dataTransfer.setData('text/plain', event.currentTarget.dataset.id);
};
const drop = event => {
document.querySelectorAll('.column').forEach(column => column.classList.remove('drop'));
document.querySelector(`[data-id="${event.dataTransfer.getData('text/plain')}"]`).remove();
event.preventDefault();
event.currentTarget.innerHTML = event.currentTarget.innerHTML + event.dataTransfer.getData('text/html');
};
const allowDrop = event => {
event.preventDefault();
};
document.querySelectorAll('.column').forEach(column => {
column.addEventListener('dragenter', dragEnter);
column.addEventListener('dragleave', dragLeave);
});
document.addEventListener('dragstart', e => {
if (e.target.className.includes('card')) {
dragStart(e.target);
}
});
document.addEventListener('dragend', e => {
if (e.target.className.includes('card')) {
dragEnd(e.target);
}
});要在右列中显示人员，我可以通过创建3个不同的php页面并执行查询$sql ="SELECT firstname，lastname FROM personal where zoneAccess = 1"来实现;
然后$sql ="从个人中选择名、姓，其中zoneAccess = 2";
然后$sql ="从个人中选择名、姓，其中区域访问= 3";
但我知道这不是正确的方法。你能帮我改进一下吗？我怎样才能把所选区域的编号写入数据库的zoneAccess字段？
谢谢你，
凯文。
1条答案
按热度按时间xu3bshqb1#
我找到了一种让一切正常工作的方法，但我的代码没有优化：
对于我想从/向其拖放的每个区域，我执行一个MYSQL请求来检索与每个区域关联的名称：
然后为要拖放的区域创建DIV
然后为每个区域创建javascript以允许拖放，并为每个更新提供一个php文件链接
所以对于每个更新我有一个不同的php文件，只有zoneAcces = '1'或zoneAcces = '2'或...这是不同的