javascript - 使用拖放后更新 MySQL 中的持久数据

Question

场景:

我有一个简单的网站，有 8 个方形 div。其中两个 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。任何帮助表示赞赏。

Answer 1

这可能无法回答所有问题，但希望可以让您走上正确的道路。使用jquery虽然我觉得更容易。首先在每个 if/elseif 中设置变量。在此示例中，我将其命名为“target_variable”。然后，只需在第一个 else 语句末尾向连接到数据库并在数据库中执行更新的脚本发出 ajax 请求即可。

我猜你应该将删除的 ID 放在“data”变量中？

    // 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.
}
?>