Tengo un div (div1) que contiene varios divs arrastables(divdraggable). Necesito poder arrastrarlos al div2 que tiene el evento ondrop, pero que no me permita insertarlo dentro del divdraggable que he arrastrado antes al div2. Es decir que los divdraggable queden como hijos de div2 pero no que se pudan meter como hijos de un divdraggable.
¿Porfavor alguien me puede echar una mano?
Pego aquí el código:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<style type="text/css">
#div1, #div2,#div3
{float:left; width:300px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
.box {border:1px solid #aaaaaa; background-color:#DDD;}
.hidden{display: none;};
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data ));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<div draggable="true" ondragstart="drag(event)" id="1" class="box" >
<div class="hidden">el titulo</div>
<div class="hidden">la imagen</div>
<p> el titulo</p>
<img src="la url de la imagen" width="70" height="53" />
</div>
<div draggable="true" ondragstart="drag(event)" id="2" class="box" >
<div class="hidden">el titulo</div>
<div class="hidden">la imagen</div>
<p> el titulo</p>
<img src="la url de la imagen" width="70" height="53" />
</div>
<div draggable="true" ondragstart="drag(event)" id="3" class="box" >
<div class="hidden">el titulo</div>
<div class="hidden">la imagen</div>
<p> el titulo</p>
<img src="la url de la imagen" width="70" height="53" />
</div>
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>