Buonasera a tutti,
Vi scrivo perchè ho una grande confusione riguardo all'interazione della funzione di trascinamento con il database.
Per farla (spero) semplice provo a descrivere meglio ciò che voglio fare:
Scenario:
- 2 div(drop1, drop2) con posizione fissa tramite CSS
- 1 div(drag) trascinabile dentro ai div (drop1, drop2)
In teoria ciò che vorrei fare è che al trascinamento del div(drag) dentro uno dei 2 div(drop1, drop2) si possa cambiare un record nel database che assuma l'id del div in cui è stato trascinato.
Spero di essermi spiegato; di seguito posto il codice:
<?php
include "connessione.php";
if (!$result = $connessione->query("SELECT * FROM ded"))
{
echo "Errore della query:" . $connessione->error . ".";
exit();
}
else
{
if($result->num_rows >=0)
{
echo "<div class= 'drop' id= 'p1' ondrop='rilascia(event)' ondragover='rilasciaImg(event)'>";
echo "<div id= 'drag' draggable= 'true' ondragstart= 'trascina(event)'></div>";
echo "</div>";
echo "<div class= 'drop' id= 'p2' ondrop='rilascia(event)' ondragover='rilasciaImg(event)'></div>";
}
$result->close();
}
$connessione->close();
?>
<style>
.drop{
background-color: rgba(0,0,0,0.6);
margin: 0;
padding: 0;
position: absolute;
width: 110px;
height: 100px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
#p1{
top: 20px;
left: 20px;
}
#p2{
top: 20px;
left: 200px;
}
#drag {
background-color: rgba(0,0,0,0.6);
margin: 0;
padding: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
</style>
<script>
function trascina(x) {
x.dataTransfer.setData("text", x.target.id);
}
function rilascia(x) {
x.preventDefault();
var data = x.dataTransfer.getData("text");
x.target.appendChild(document.getElementById(data) );
}
function rilasciaImg(x) {
x.preventDefault();
}
</script>
Il codice riportato funziona ma non so come (dove, quando, perchè, T_T) inserire la variazione del record nel database.
Grazie per l'attenzione