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

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/elseifs中设置变量。在这个例子中，我将它命名为“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!"); 
    }); 

DB脚本：

<?php 
if (isset($_POST['target'])) { 
$target = $_POST['target']; 
$dropped = $_POST['dropped_id']; 

//Connect and use the dynamic variables in the DB updates. 
} 
?>