情景:
我有一个简单的网站,有8个方格。其中两个div是图片,另外六个是空的。这些图片只是标记div的占位符,以显示谁在使用什么物理机器。
这两张图片是可拖动的,我有以下javascript,可以将它们拖放到空div中。
代码:
虽然它不是最优雅的,但我希望它得到我的观点。
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");
if (ev.target.className === "active") {
return;
} else {
ev.target.appendChild(document.getElementById(data));
if (ev.target.id === "A") {
//switch the value in the database table for "A" from "0" to "1" to persist the location of the picture.
//switch the value in the database table for "[dragged from]" from "1" to "0" to clear the location of the picture.
} else if (ev.target.id === "B") {
//switch the value in the database table for "B" from "0" to "1" to persist the location of the picture.
//switch the value in the database table for "[dragged from]" from "1" to "0" to clear the location of the picture.
} else if (ev.target.id === "C") {
//switch the value in the database table for "C" from "0" to "1" to persist the location of the picture.
//switch the value in the database table for "[dragged from]" from "1" to "0" to clear the location of the picture.
} else if (ev.target.id === "D") {
//switch the value in the database table for "D" from "0" to "1" to persist the location of the picture.
//switch the value in the database table for "[dragged from]" from "1" to "0" to clear the location of the picture.
} else if (ev.target.id === "E") {
//switch the value in the database table for "E" from "0" to "1" to persist the location of the picture.
//switch the value in the database table for "[dragged from]" from "1" to "0" to clear the location of the picture.
} else if (ev.target.id === "F") {
//switch the value in the database table for "F" from "0" to "1" to persist the location of the picture.
//switch the value in the database table for "[dragged from]" from "1" to "0" to clear the location of the picture.
}
}
}
我不确定如何定位“拖出来”div的id。任何帮助表示赞赏。
答案 0 :(得分:0)
这可能无法解决所有问题,但希望能让你走上正轨。使用jquery虽然我觉得更容易。首先在每个if / elseif中设置变量。在这个例子中,我将其命名为“target_variable”。然后在第一个else语句的末尾将一个ajax请求发送到连接到DB并在数据库中执行更新的脚本。
我猜你应该在“数据”变量中删除ID吗?
// fire off the request
var request = $.ajax({
url: "db_script.php",
type: "post",
data: {target:target_variable,dropped_id:data}
});
// callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
alert("Success!");
});
// callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
// log the error to the console
alert("Fail!");
});
数据库脚本:
<?php
if (isset($_POST['target'])) {
$target = $_POST['target'];
$dropped = $_POST['dropped_id'];
//Connect and use the dynamic variables in the DB updates.
}
?>