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

Update persistent data in MySQL after using drag and drop

本文关键字：数据 MySQL 拖放 更新      更新时间：2023-10-21

场景：

我有一个简单的网站，有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。感谢您的帮助。

这可能不会回答所有问题，但有望让您走上正轨。不过我觉得使用jquery更容易。首先在每个if/elseifs中设置变量。在本例中，我将其命名为"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!");
    });

DB脚本：

<?php
if (isset($_POST['target'])) {
$target = $_POST['target'];
$dropped = $_POST['dropped_id'];
//Connect and use the dynamic variables in the DB updates.
}
?>
相关文章：