Evitar superposicion de elementos en Drag and Drop

Alfonso28 · #1 (**permalink**) 17/10/2015, 11:02

Buenos dias, tengo un problema intentando realizar una funcion de drag and drop, el tema es que logre que funcionara, pero también necesitaba saber que se arrastraba y de donde a donde se movia, eso pude hacerlo pero se me presenta un problema cuando se superponen los elementos, ya que si los muevo de nuevo entonces se registra que se movió el de abajo cuando en realidad se mueve el de arriba. En resumidas cuentas no hallo como hacer para que dejen de superponerse uno encima del otro, y que si se le pone uno encima que inmediatamente el que estaba alli se mueva a la posición vacía del que se esta moviendo, o se haga un intercambio, les dejo el codigo y agradecería que me pudiesen ayudar (soy un tanto nuevo en js)

Código HTML:

<html>
<head>
	<title>sin título</title>
	<script type="text/javascript" src="../script/dnd.js"></script>
	<link type="text/css" rel="stylesheet" href="../estilos/estpra.css">
</head>
<body>
	<form name="form">
			<input type="button" value="Siguiente" onclick="datos()">
		<div id="cajanodriza">
			<div id="c1" class="caja" ondragover="recibir(event)" ondragstart="origen(id)" ondrop="soltar(event,id)">
				<div id="v" class="blanco" draggable="true" ondragstart="arrastrar(event,id)" ></div>
				
			</div>
			
			<div id="c2" class="caja" ondragover="recibir(event)" ondragstart="origen(id)" ondrop="soltar(event,id)">
				<div id="m" class="blanco" draggable="true" ondragstart="arrastrar(event,id)"></div>
			</div>
			
			<div id="c3" class="caja"  ondragover="recibir(event)" ondragstart="origen(id)" ondrop="soltar(event,id)">
				<div id="n" class="blanco" draggable="true" ondragstart="arrastrar(event,id)"></div>
			</div>
			
			<div id="c4" class="caja" ondragover="recibir(event)" ondragstart="origen(id)" ondrop="soltar(event,id)">
				<div id="a" class="blanco" draggable="true" ondragstart="arrastrar(event,id)"></div>
			</div>
			
			<div id="c5" class="caja" ondragover="recibir(event)" ondragstart="origen(id)" ondrop="soltar(event,id)">
				<div class="cable" id="az" draggable="true" ondragstart="arrastrar(event,id)"></div>
			</div>
			
			<div id="c6" class="caja"  ondragover="recibir(event)" ondragstart="origen(id)" ondrop="soltar(event,id)">
				<div class="cable" id="na" draggable="true" ondragstart="arrastrar(event,id)"></div>
			</div>
			
			<div id="c7" class="caja"  ondragover="recibir(event)" ondragstart="origen(id)" ondrop="soltar(event,id)">
				<div class="cable" id="ma" draggable="true" ondragstart="arrastrar(event,id)"></div>
			</div>
			
			<div id="c8" class="caja"  ondragover="recibir(event)" ondragstart="origen(id)" ondrop="soltar(event,id)">
				<div class="cable" id="ve" draggable="true" ondragstart="arrastrar(event,id)"></div>
		</div>
	<div id="c9" class="caja"  ondragover="recibir(event)" ondragstart="origen(id)" ondrop="soltar(event,id)"></div>
	</form>
</body>
</html>

CSS

Código:

#tabla
{	
	position:absolute;
	z-index:3; 
	left:0px;
	top:200px;
}
#cable
{
	position:absolute;
	z-index:2;
	width:250px;
	height:690px;
	margin-left:420px;
	margin-top:190px;
}
.cable
{
	width:25px;
	height:690px;
	margin:auto;
	padding-top:10px;
}
div
{
	z-index:1;
}
#cajanodriza
{
	margin-top:130px;
	margin-left:430px;
	z-index:2;
}
.caja
{
	width:25px;
	height:690px;
	border:none;
	display:inline-block;
	padding-top:10px;
	z-index:2;
}
.blanco
{
	width:20px;
	height:687px;
	border:2px dashed red;
	margin:auto;
	padding-top:10px;
	background:linear-gradient(90deg,#A5A5A5,white,#A5A5A5);
	z-index:2;
}
#v
{
	border:2px dashed green;
	z-index:2;
}
#m
{
	border:2px dashed #B3540B;
	z-index:2;
}
#n
{
	border:2px dashed orange;
	z-index:2;
}
#a
{
	border:2px dashed blue;
	z-index:2;
}
#ve
{
	background:linear-gradient(90deg,#0D6D00,#129400,#0D6D00);
	z-index:2;
}
#ma
{
	background:linear-gradient(90deg,#7C4100,#914C00,#7C4100);
	z-index:2;
}
#na
{
	background:linear-gradient(90deg,#FFAB10,#FFBB3C,#FFAB10);
	z-index:2;
}
#az
{
	background:linear-gradient(90deg,#1F2CC5,#2D3BD8,#1F2CC5);
	z-index:2;
}

JavaScript

Código:

var inter;
var orig   = "";
var auxid  = "";
var auxic  = "";
var contc1 = "";
var contc2 = "";
var contc3 = "";
var contc4 = "";
var contc5 = "";
var contc6 = "";
var contc7 = "";
var contc8 = "";
function recibir (e)
	{
		e.preventDefault();
	}
function arrastrar(e,a)
	{
		e.dataTransfer.setData("text",e.target.id);
		auxid = (a);
	}
			
function soltar (e,a)
	{
		inter = (document.getElementById(a).firstChild);
		var datos=e.dataTransfer.getData("text");
		e.target.appendChild(document.getElementById(datos));
		auxic = (a);
		if (auxic == "c1")
		{
			contc1 = auxid;
		}
		else if (auxic == "c2")
		{
			contc2 = auxid;
		}
		else if (auxic == "c3")
		{
			contc3 = auxid;
		}
		else if (auxic == "c4")
		{
			contc4 = auxid;
		}
		else if (auxic == "c5")
		{
			contc5 = auxid;
		}
		else if (auxic == "c6")
		{
			contc6 = auxid;
		}
		else if (auxic == "c7")
		{
			contc7 = auxid;
		}
		else if (auxic == "c8")
		{
			contc8 = auxid;
		}
	}

function origen(a)
{
	orig = (a);
}
function datos() //contenido de las cajas
	{
		alert(contc1);
		alert(contc2);
		alert(contc3);
		alert(contc4);
		alert(contc5);
		alert(contc6);
		alert(contc7);
		alert(contc8);
	}

Asi a la hora de evaluar el contenido de las cajas, no hay errores de superposición, el html tiene un boton que muestra el contenido de las cajas de la primera a la ultima, si toqueteas un poco veras que cuando esta un elemento encima de otro se toma el valor del que tiene abajo y no de el mismo, se solucionaría con un intercambio para evitar la superposición. De antemano gracias