我有一个简单的页面,它使用MySQLi函数创建的HTML拖放缩略图。像这样
<?php
include "database_connection.php";
$query = "SELECT * FROM table where currentZone = 0";
if ($result = mysqli_query($link, $query)) {
/* fetch associative array */
while ($row = mysqli_fetch_assoc($result))
{
echo "<img id='{$row["ID"]}' src='{$row["photoLink"]}.jpg' draggable='true' ondragstart='drag(event)' width='75' height='75'>" ;
}
/* free result set */
mysqli_free_result($result);
}
mysqli_close($link);
?>
在这个简单的页面中,我有四个可丢弃的div
<div id="1" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="3" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="4" ondrop="drop(event)" ondragover="allowDrop(event)">
我可以随意将每个缩略图来回拖动到每个div中。
我的问题:
使用Ajax,有人能提供一个例子来执行一个拖放事件,并将其发布到我有数据库工作的php页面吗?
示例:如果我拾取thumbnail-1,并将其放入div-2中,那么一个on-drop事件是否可以触发我的php代码,以便我可以修改数据库以反映从div到div的更改?
我知道我可能可以通过将<img id="">
推入ajax脚本来实现这一点,但经过数小时的搜索,我找不到证明它可以实现的示例代码。我是Ajax的新手,我能够让Ajax正确地处理输入字段,但在使用拖放事件时找不到任何帮助。如有任何帮助,我们将不胜感激。
编辑**
这是当前代码:
script.js
function drop(id, event) {
$.ajax({
url: "test.php",
type: "POST",
data: {
id: id,
event: event
},
success: function () {
console.log('great success');
return true
}
});
return false;
}
主页.php
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
<header class="main-header" role="banner"><center>
<img src="logo.jpg" height="90" width="400"alt="Banner Image"/></center>
</header>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="1" ondrop="drop(event)" ondragover="allowDrop(event)">
<?php
include "database_connection.php";
///////////////////////////////////////////////////////////////////////////////////////////////
/* check connection */
if (mysqli_connect_errno()) {
printf("Connect failed: %s'n", mysqli_connect_error());
exit();
}
else
{
}
$query = "SELECT * FROM table where currentZone = 1";
if ($result = mysqli_query($link, $query)) {
/* fetch associative array */
while ($row = mysqli_fetch_assoc($result)) {
echo "<img id='{$row["ID"]}' src='{$row["photoLink"]}.jpg' draggable='true' ondragstart='drag(event)' width='75' height='75'>" ;
}
/* free result set */
mysqli_free_result($result);
}
mysqli_close($link);
/////////////////////////////////////////////////////////////////////////////////
?>
</div>
<div id="2" ondrop="drop(event)" ondragover="allowDrop(event)">
<?php
include "database_connection.php";
$query = "SELECT * FROM table where currentZone = 2";
if ($result = mysqli_query($link, $query)) {
/* fetch associative array */
while ($row = mysqli_fetch_assoc($result)) {
echo "<img id='{$row["ID"]}' src='{$row["photoLink"]}.jpg' draggable='true' ondragstart='drag(event)' width='75' height='75'>" ;
}
/* free result set */
mysqli_free_result($result);
}
mysqli_close($link);
?>
</div>
?>
而test.php仅仅连接到DB并插入一个垃圾记录。
function drop(id, event) {
$.ajax({
url: "do_sql_stuff.php",
type: "POST",
data: {
id: id,
event: event
},
success: function () {
console.log('great success');
return true
}
});
return false;
}
然后在您的do_sql_stuff.php中,您可以获得
$event = $_POST['event'];
$id = $_POST['id'];