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. 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 that you have read and understand our privacy policy and code of conduct.

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