Que tal hermano, en la función llamada por el evento donde sueltas los objetos,obtienes el id o el nombre del elemento lo que necesites para validar la consulta en mi caso obtengo el id y ocupo var data=ev.dataTransfer.getData("text"); Despues mandas llamar a la función php de otro archivo php con la consulta mysql. Te dejo un ejemplo:
Pagina Principal
Código PHP:
<!DOCTYPE HTML>
<html>
<head>
<title>Arrastrar y soltar</title>
</head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<style type="text/css">
/*estilo general: resetear*/
* { margin: 0 auto; padding: 0; }
/*estilo de contenedores*/
#cont0 { width: 90%; height: 300px; }
#cont1 { width: 90%; height: 800px; background-color:lime; overflow: auto; }
#cont2 { width: 90%; height: 800px; background-color:skyblue; overflow: auto; }
</style>
<script type="text/javascript">
//Recoger elemento arrastrable//
function evdragstart(ev,el,val) { //ev= el evento, el=elemento arrastrado.
cont1=el.parentNode; //guardamos el elemento padre del elemento en una variable.
ev.dataTransfer.setData("text",ev.target.id); //guardamos datos del elemento.
$('html,body').animate/*scroll que se movera en tu caso a lo mejor es html,body*/({
scrollTop: $("#aqui").offset().top/*Donde se movera*/
// scrollTop: 0 para mover hasta arriba
}, 2000/*tiempo que se movera en ml*/);
}
//mientras se arrastra:
function evdragover (ev) { //ev=el evento.
ev.preventDefault(); //quitar comportamiento por defecto.
}
//Al soltar el elemento arrastrado
function evdrop(ev,el) { //ev=el evento; el=receptor de soltado
ev.stopPropagation(); //impedir otras acciones
ev.preventDefault(); //quitar comportamiento por defecto
var data=ev.dataTransfer.getData("text"); //recogemos datos del elemento
mielem=ev.target.appendChild(document.getElementById(data)); //obtenemos el elemento arrastrado
cont1.appendChild(mielem); //ponemos el elemento arrastrado en el mismo sitio donde estaba.
mielem2=mielem.cloneNode(true); //creamos una copia del elemento arrastrado.
mielem2.setAttribute("draggable","false"); //impedimos que el nuevo elemento pueda volver a arrastrarse
el.appendChild(mielem2); //colocamos la copia en el receptor de soltado
$.ajax({
type: "POST", //Se mandaran las variables por POST
url: "funcion.php", //El nombre de la pagina con las funciones
data: { nombre: data } //Los datos que se mandaran
})
}
</script>
<body>
<div id="cont0">
<!--contenedor de salida-->
<div id="cont1" >
<!-- Cada elemento está dentro de un contenedor, (div o span), lo cual permitirá
recuperarlo en su sitio después de ser arrastrado.-->
<div><p draggable="true" ondragstart="evdragstart(event,this)" id="e1">Arrastrame</p></div>
<span><img src="../../objetos/espana.gif" alt="Caja1"
draggable="true" ondragstart="evdragstart(event,this)" id="e2"/></span>
<span><img src="../../objetos/europa.gif" alt="Caja2"
draggable="true" ondragstart="evdragstart(event,this)" id="e3"/></span>
<span><img src="../../objetos/italia.gif" alt="Caja3"
draggable="true" ondragstart="evdragstart(event,this)" id="e4"/></span>
</div>
<!--receptor de soltado -->
<div id="cont2" ondragover="evdragover(event)" ondrop="evdrop(event,this)">
<div id="aqui"></div><!--Aqui se movera el scroll-->
</div>
<? echo "<img src=".$row['imagen'].">" ?>
</div>
</body>
funcion.php
Código PHP:
<?php
$nom = $_POST['nombre'];
if(!empty($nom)) {
insertar($nom);
}
function insertar($nom) {
$con = mysql_connect('localhost','user', 'pass');
mysql_select_db('prueba', $con);
mysql_query("INSERT INTO nombres (nombre) VALUES ('$nom')",$con);
}
?>
Al momento que sueltes los objetos se registraran en la bd.
Perdón por el código lo reutilice para ponerlo de ejemplo. Saludos!!