使用拖放操作後更新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. 
} 
?>