I want to be able to drag the elements that I want and they can all be put in the same box, in this example the element depends on an id to be able to be accepted in the box and also only one can be placed, I want to remove that and I can put any object or at least those who have the same class.
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>
the rest of the elements that want to be in the box too
<h2></h2>
<p></p>
<!-- etc... -->
You can do it like this, obtaining the class of the elements, I hope it works for you, although I recommend that each element have its id, for good practice purposes.