我正在尝试将 HTML5 拖放 div 保存到数据库，这是当前状态。 this shows what I am trying to save
正如您从图像中看到的，页面左侧是将被拖动到网格中的数据，这就是我要保存的数据。
目前，我可以将项目从左侧拖动到页面中心的特定位置，但是我不知道如何将该数据保存在它所处的状态，我正在使用 HTMl5 并编写了一个连接数据库的 php 页面，
我在网上做了研究，发现我可能需要 jQuery，但我不理解。
在图像中，您可以看到我已将数据拖动到页面上的特定位置。
下面是html5源代码。有人可以帮忙吗？
<!DOCTYPE html>
<html lang="en">
<head>
<title>Create a new plan</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<?php // redirecting any web user who hasn't logged in so that the page cannot be accessed from the url
session_start();
if(!isset($_SESSION['sess_user '])) {
header("location:login.php");
}
?>
<!-- this welcomes the session user and gives them the option to log out -->
<h3>Welcome, <?=$_SESSION['sess_user '];?>! <a href="logout.php">Logout</a></h3>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
document.getElementById('StudentImageID ').innerHTML = ev.target.id;
document.getElementById('StudentName ').innerHTML = ev.target.name;
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">DNP Seating Solutions</a>
<ul class="nav navbar-nav navbar-right">
<li><a href="LoggedOut.html">Log Out</a></li>
</ul>
</div>
</div>
</nav>
<br>
<!--<div id="col-sm-2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="student" src="student.jpg" draggable="true" ondragstart="drag(event)" width="100" height="100">-->
<br>
<div class= "col-md-3 well" style="float: left">
<center><p>Students</p></center>
<img id="OsamaSaeed" data-student-type="Osama Saeed" src="StudentImages/One.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="ThomasAli" data-student-type=" Thomas Ali" src="StudentImages/Two.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="AliMohammed" data-student-type="Ali Mohammed" src="StudentImages/Three.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="LaurenDent" data-student-type="Lauren Dent" src="StudentImages/Four.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="QuintonDial" data-student-type="Quntion Dial" src="StudentImages/Five.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="AdeebAli" data-student-type="Adeeb Ali" src="StudentImages/Six.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="BabsFab" data-student-type="Babs Fab" src="StudentImages/Seven.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="ArtmanSummer" data-student-type="Artman Summer" src="StudentImages/Eight.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="BykowskiDerek" data-student-type="Bykowski Derek" src="StudentImages/Nine.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="AlisonRose" data-student-type="Alison Rose" src="StudentImages/Ten.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="GraySonny" data-student-type="Gray Sonny" src="StudentImages/Eleven.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="GregersonLuke" data-student-type="Gregerson Luke" src="StudentImages/Twelve.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="AjayGriffin" data-student-type="Ajay Griffin" src="StudentImages/Thirteen.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="JohnsonJinny" data-student-type="Johnson Jinny" src="StudentImages/Fourteen.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="KazmirScoot" data-student-type="Kazmir Scoot" src="StudentImages/Fifteen.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="LattimoreCorey" data-student-type="Lattimore Corey" src="StudentImages/Sixteen.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="LeonLeon" data-student-type="Leon Leon" src="StudentImages/Seventeen.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="MastersonSoph" data-student-type="Masterson Soph" src="StudentImages/Eighteen.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="MurieJenna" data-student-type="Mure Jenna" src="StudentImages/Nineteen.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="TomLawrence" data-student-type="Tom Lawrence" src="StudentImages/Twenty.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="TrouncAmanda" data-student-type="Trounc Amanda" src="StudentImages/Twentyone.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="LittleJohn" data-student-type="Little John" src="StudentImages/Twentytwo.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="FrancisStacey" data-student-type="Francis Stacey" src="StudentImages/Twentythree.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="DooliteSean" data-student-type="Doolite Sean" src="StudentImages/Twentyfour.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="DialQuinton" data-student-type="Dial Quinton" src="StudentImages/Twentyfive.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="DentLauren" data-student-type="Dent Lauren" src="StudentImages/Twentysix.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="CookeyPamela" data-student-type="Cookey Pamela" src="StudentImages/Twentyseven.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="CathNory" data-student-type="Cath Nory" src="StudentImages/Twentyeight.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="NorhAhmd" data-student-type="Norh Ahmd" src="StudentImages/Twentynine.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
<img id="OmarAli" data-student-type="Omar Ali" src="StudentImages/Thirty.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
</div>
<div class="container well" style="float: right; width: 70%;">
<div class="row">
<div class="col-sm-2" id="S1" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">1</div>
<div class="col-sm-2" id="S2" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)">2</div>
<div class="col-sm-2" id="S3" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">3</div>
<div class="col-sm-2" id="S4" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)">4</div>
<div class="col-sm-2" id="S5" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">5</div>
</div>
</center>
<br>
<div class="row">
<div class="col-sm-2" id="S6" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">6</div>
<div class="col-sm-2" id="S7" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)">7</div>
<div class="col-sm-2" id="S8" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">8</div>
<div class="col-sm-2" id="S9" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)">9</div>
<div class="col-sm-2" id="S10" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">10</div>
</div>
<br>
<div class="row">
<div class="col-sm-2" id="S11" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">11</div>
<div class="col-sm-2" id="S12" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)">12</div>
<div class="col-sm-2" id="S13" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">13</div>
<div class="col-sm-2" id="S14" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)">14</div>
<div class="col-sm-2" id="S15" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">15</div>
</div>
<br>
<div class="row">
<div class="col-sm-2" id="S16" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">16</div>
<div class="col-sm-2" id="S17" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)">17</div>
<div class="col-sm-2" id="S18" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">18</div>
<div class="col-sm-2" id="S19" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)">19</div>
<div class="col-sm-2" id="S20" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">20</div>
</div>
<br>
<div class="row">
<div class="col-sm-2" id="S21" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">21</div>
<div class="col-sm-2" id="S22" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)">22</div>
<div class="col-sm-2" id="S23" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">23</div>
<div class="col-sm-2" id="S24" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)">24</div>
<div class="col-sm-2" id="S25" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">25</div>
</div>
<br>
<div class="row">
<div class="col-sm-2" id="S26" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">26</div>
<div class="col-sm-2" id="S27" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)">27</div>
<div class="col-sm-2" id="S28" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">28</div>
<div class="col-sm-2" id="S29" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)">29</div>
<div class="col-sm-2" id="S30" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">30</div>
</div>
<br>
<center>
<form action="" method="POST">
<input type="submit" class="btn btn-success" name="SavePlan" value="Save Plan" />
</form>
</center>
</div>
</body>
</html>下面是连接数据库的代码。
<?php
$connection=m ysql_connect( "mi-linux.wlv.ac.uk", "user", "password");
if (!$connection) die( "Cannot connect to DataBase");
// making a connection to the database mysql_select_db("db1500052", $connection) or die( "Can not find DB");
?>
我现在已经成功编写了一个 update.php 页面，该页面会将新位置发送到数据库，但是仍然没有解决 html 的 jQuery 和 Ajax 方面，
<?php
include("config.php");
$array = $_POST['listnumber'];
if ($POST['update'] == "订单") {
$x = 1;
foreach ($array as $key => $value) {
$query = "UPDATE dragdrop SET listnumber = ". $x . "WHERE id = " . $value;
mysql_query($query) or die(mysql_error());
$x ++;
}
echo 'Saved';
} ？>
最佳答案
欢迎来到 StackOverflow。为此，您(至少)需要了解两件事。
首先是如何将数据发送到您的服务器。实现此目的的一个好方法是将 AJAX 与 HTTP POST 结合使用。这是 SO 的一个很好的问答，应该可以帮助您入门。您可以在放置事件中使用类似的内容将数据发送到服务器:Sending an HTTP Post using Javascript triggered event
第二个是如何从 PHP 代码将数据插入到 mysql 数据库。您的连接示例有点过时 - 您应该使用 mysqli 接口(interface)以获得更好的安全性。请从 PHP 文档中的这篇文章开始了解这一点:http://php.net/manual/en/mysqli.query.php
关于php - 将 HTML5 拖放元素保存到数据库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36804208/