Hola! estoy tratando de hacer un drag n' drop que acomode los cuadros en el orden que yo quiera, logicamente sin usar librerias como JQuery etc., el problema es que cuando mueves un cuadro hacia arriba de otro, este se encima del otro ó a veces si lo logra hacer, yo quiero evitar este error que encimen uno de otro y el codigo me queda de esta forma...
<!DOCTYPE html>
<html>
<head>
<title>Drag n' Drop</title>
<style>
#destino1, #destino2, #destino3{
float: left;
width: 250px;
height: 250px;
padding: 10px;
margin: 10px;
}
#arrastrable1, #arrastrable2, #arrastrable3{
width: 75px;
height: 70px;
padding: 5px;
margin: 5px;
}
#destino1{
background-color: #8080FF;
}
#destino2{
background-color: #8080FF;
}
#destino3{
background-color: #8080FF;
}
#arrastrable1{
background-color: #CC0;
}
#arrastrable2{
background-color: #FC0;
}
#arrastrable3{
background-color: #9CF;
}
</style>
<script>
function empezar(e) {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData("Data", e.target.getAttribute('id'));
e.dataTransfer.setDragImage(e.target, 0, 0);
return true;
}
function enter(e) {
return true;
}
function over(e) {
var esarrastrable = e.dataTransfer.getData("Data");
var id = e.target.getAttribute('id');
return false;
}
function drop(e) {
var esarrastrable = e.dataTransfer.getData("Data");
e.target.appendChild(document.getElementById(esarr astrable));
e.stopPropagation();
return false;
}
</script>
</head>
<body>
<h1>Arrastrar y Soltar</h1>
<div id="destino1" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)">
<div id="arrastrable1" draggable="true" ondragstart="return empezar(event)" ondragend="return end(event)">
1
</div>
<div id="arrastrable2" draggable="true" ondragstart="return empezar(event)" ondragend="return end(event)">
2
</div>
<div id="arrastrable3" draggable="true" ondragstart="return empezar(event)" ondragend="return end(event)">
3
</div>
</div>
</body>
</html>