Quiero poder arrastrar los elementos que yo quiera y todos puedan ser metidos en la misma caja, en este ejemplo depende de una id el elemento para poder ser aceptado en la caja y además solo se puede uno, quiero quitar eso y pueda meter cualquier objeto o por lo menos los que tengan la misma clase.
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));
}
#caja {
width: 250px;
height: 70px;
padding: 10px;
background-color: #ddd;
text-align: center;
}
<div id="caja" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<h1 id="mover" draggable="true" ondragstart="drag(event)">TEXTO</h1>
el resto de elementos que quieren estar también en la caja
<h2></h2>
<p></p>
<!-- etc... -->