Hola hermano, perdón seré más especifico para que me entiendas, usaré el código de la página DEMO1 ya con las funciones para agregar a la base de datos:
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<title>Demo 1: Drag and drop</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="css/demos.css" media="screen" type="text/css">
<style type="text/css">
/* CSS for the demo. CSS needed for the scripts are loaded dynamically by the scripts */
#mainContainer{
width:600px;
margin:0 auto;
margin-top:10px;
border:1px double #000;
padding:3px;
}
#leftColumn{
width:300px;
float:left;
}
#rightColumn{
width:200px;
float:right;
margin:2px;
height:450px;
}
.dragableBox{
width:100px;
height:60px;
border:1px solid #000;
background-color:#FFF;
margin-bottom:5px;
padding:10px;
font-weight:bold;
text-align:center;
}
.dropBox{
width:190px;
border:1px solid #000;
background-color:#E2EBED;
height:200px;
overflow:auto;
margin-bottom:10px;
padding:3px;
}
.clear{
clear:both;
}
img{
border:0px;
}
</style>
<script type="text/javascript" src="js/drag-drop-custom.js"></script>
</head>
<body>
<div id="header"><a href="/index.html"><img src="/images/heading3.gif"></a></div>
<div id="mainContainer">
<h2>Drag and drop - demo 1</h2>
<div id="leftColumn">
<div class="dragableBox" id="box1">CAT</div>
<div class="dragableBox" id="box2">DOG</div>
<div class="dragableBox" id="box3">HORSE</div>
<div class="dragableBox" id="box4">TIGER</div>
</div>
<div id="rightColumn">
<div id="dropBox" class="dropBox">
<p><b>Drop some boxes on me</b></p>
<div id="dropContent"></div>
</div>
<div id="dropBox2" class="dropBox">
<p><b>Drop some boxes on me too</b></p>
<div id="dropContent2"></div>
</div>
</div>
<div class="clear"></div>
<div class="konaBody"></div>
</div>
<div id="debug"></div>
<script type="text/javascript">
// Custom drop actions for <div id="dropBox">
function dropItems(idOfDraggedItem,targetId,x,y)
{
var html = document.getElementById('dropContent').innerHTML;
if(html.length>0)html = html + '<br>';
html = html + 'Item with id="' + idOfDraggedItem+'" dropped';
document.getElementById('dropContent').innerHTML = html;
$.ajax({
type: "POST", //Se mandaran las variables por POST
url: "funcion.php", //El nombre de la pagina con las funciones
data: { nombre: idOfDraggedItem } //Los datos que se mandaran
});
}
// Custom drop actions for <div id="dropBox2">
function dropItems2(idOfDraggedItem,targetId,x,y)
{
var html = document.getElementById('dropContent2').innerHTML;
if(html.length>0)html = html + '<br>';
html = html + 'Item "' + document.getElementById(idOfDraggedItem).innerHTML + '" dropped';
document.getElementById('dropContent2').innerHTML = html;
$.ajax({
type: "POST", //Se mandaran las variables por POST
url: "funcion.php", //El nombre de la pagina con las funciones
data: { nombre: idOfDraggedItem } //Los datos que se mandaran
});
}
var dragDropObj = new DHTMLgoodies_dragDrop();
dragDropObj.addSource('box1',true); // Make <div id="box1"> dragable. slide item back into original position after drop
dragDropObj.addSource('box2',true); // Make <div id="box2"> dragable. slide item back into original position after drop
dragDropObj.addSource('box3',true); // Make <div id="box3"> dragable. slide item back into original position after drop
dragDropObj.addSource('box4',true); // Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addTarget('dropBox','dropItems'); // Set <div id="dropBox"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('dropBox2','dropItems2'); // Set <div id="dropBox2"> as a drop target. Call function dropItems2 on drop
dragDropObj.init();
</script>
</body>
</html>
Archivo funcion.php: Sirve para agregar en la base de datos en mi caso toma la variable post toma id de la caja, el archivo lo deje en la raíz:
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);
}
?>
Una recomendación es que no uses códigos ajenos, ni librerías, si apenas te estas familiarizando con la programación web o si no son necesarias, ya que contienen mucho código a veces necesario para lo que queremos hacer. Y si los usas intenta entender su funcionalidad, no hay problema si no le entiendes a la primera, tu sigue intentando y veras como un día por arte de magia le entiendes.
Determinación en todo lo que hagas hermano!!