Question

情景：

我有一个简单的网站，有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。任何帮助表示赞赏。

Answer 1

这可能无法解决所有问题，但希望能让你走上正轨。使用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.
}
?>

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

1 个答案: