0

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... -->
1
  • Aquí en la parte del final puedes ver un ejercicio con imágenes de pokemón, espero te ayude es muy práctico. Commented el 18 abr. 2019 a las 5:44

1 respuesta 1

2

Puede hacerlo así, obteniendo la class de los elementos, espero te funcione, aunque te recomiendo que cada elemento lleve su id, para fines de buenas prácticas.

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("dragged-id", ev.target.className);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("dragged-id");
  ev.target.appendChild(document.getElementsByClassName(data)[0]);
ev.target.appendChild(document.getElementsByClassName(data)[1]);
}
#caja {
  width: 250px;
  height: 300px;
  padding: 10px;
  background-color: #ddd;
  text-align: center;
}
<div id="caja" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>

<h1 class="drag" draggable="true" ondragstart="drag(event)">TEXTO</h1>

<p class="drag" draggable="true" ondragstart="drag(event)">parrafo</p>

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.