1

Tengo el siguiente código, es un drag and drop simple. Sucede que cuando muevo los elementos del div1 al div2 puedo mover todos los elementos, pero cuando intento mover los elementos del div2 al div1 solo puedo mover uno a la vez. La duda es como modificarlo para que esto ultimo suceda.

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

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {drag1
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
#div1, #div2 {
    float: left;
    width: 200px;
    height: 200px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
    }
<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <input type="text" draggable="true" ondragstart="drag(event)" id="drag1"> 
  <input type="text" draggable="true" ondragstart="drag(event)" id="drag1"> 
  <input type="text" draggable="true" ondragstart="drag(event)" id="drag1"> 
</div>



<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

1
  • si crees que fue útil mi respuesta para dar soluciono a tu pregunta por favor marca como correcta, gracias.
    – zerokira
    Commented el 30 jul. 2018 a las 13:59

2 respuestas 2

4

Abundando en la respuesta de TheVicious: cuando haces appendChild(elemento) y el elemento lo has seleccionado usando un id que está repetido, le estás intentando añadir un hijo que ya tiene, identificado por ese id.

En otras palabras, si todos los div draggables tienen el mismo id drag1 el nodo identificado por document.getElementById('drag1') siempre es el primer nodo del documento con ese id. En este caso, el primer nodo #drag1 dentro de #div1 y, si éste no tiene hijos, entonces el primer nodo #drag1 dentro de #div2. En la práctica, si le pones contenido a los hijos, verás que arrastrar el segundo en realidad arrastra el primero:

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

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {drag1
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
#div1, #div2 {
    float: left;
    width: 200px;
    height: 200px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
    }
<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <input type="text" draggable="true" ondragstart="drag(event)" id="drag1" value="soy el primero"> 
  <input type="text" draggable="true" ondragstart="drag(event)" id="drag1" value="soy el segundo"> 
  <input type="text" draggable="true" ondragstart="drag(event)" id="drag1" value="soy el tercero"> 
</div>



<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

Entonces:

  1. Mueves un nodo del #div1 al #div2, éste es el primer nodo #drag1 hijo de #div1 y puedes moverlo.
  2. El nodo identificado por #drag1 ahora el primer hijo de #div1, que originalmente estaba en el segundo lugar. El elemento que moviste pasó al tercer lugar.
  3. Ya en este punto no puedes mover nada de vuelta, porque lo que está en el #div2 al intentar seleccionarlo devuelve una referencia al primer hijo de #div1.

  4. Una vez trasladados los 3 hijos de #div1 a #div2, ya no hay ningún nodo #drag1 en #div1 por lo tanto el primer nodo #drag1 es el primer nodo hijo de #div2. Puedes mover cualquiera de esos hijos al #div1 pero estarás moviendo el primero.

  5. Cuando mueves uno de esos de vuelta, de nuevo el selector #drag1 es una referencia al primer hijo de #div1 ignorando lo que está dentro de #div2.

Una solución es darle un id único a cada input que quieres mover, pero en realidad podrías hacer lo mismo sin usar ids para los draggables. Sería cosa de almacenar una referencia al elemento en movimiento en una variable global element.

Con esto podrías tener infinitos nodos draggables y no tener que preocuparte por darles un id único:

var element=null;

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

function drag(ev) {
  element=ev.target;
}

function drop(ev) {
  ev.preventDefault();
  ev.target.appendChild(element);
  element=null;
}
#div1, #div2 {
    float: left;
    width: 200px;
    height: 200px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
    }
<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <input type="text" draggable="true" ondragstart="drag(event)" value="soy el primero" > 
  <input type="text" draggable="true" ondragstart="drag(event)" value="soy el segundo" > 
  <input type="text" draggable="true" ondragstart="drag(event)" value="soy el tercero"> 
</div>



<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

Sugerencia final

Pongámosle un poco de estilo al asunto para que se vea bonito, y además asegurémonos que sólo los elementos #div1 y #div2 puedan recibir hijos. De lo contrario, puedes arrastrar un input dentro de otro y éste desaparecería.

var element = null;

function allowDrop(ev) {
  ev.target.classList.add('feedme');
  ev.preventDefault();
}

function removeDrop(ev) {
  ev.target.classList.remove('feedme');
  ev.preventDefault();
}

function drag(ev) {
  element = ev.target;
  element.parentNode.classList.add('feedme');
  element.classList.add('dragging');
}

function drop(ev) {
  ev.preventDefault();
  ev.target.classList.remove('feedme');
  element.classList.remove('dragging');
  if (ev.target.classList.contains('droppable')) {
    ev.target.appendChild(element);
  }
  element = null;
}
#div1,
#div2 {
  float: left;
  width: 200px;
  height: 200px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

#div1 input,
#div2 input {
  cursor: ew-resize;
}

#div1.feedme,
#div2.feedme {
  background: #FFFFEE;
}

.dragging {
  border: 1px dashed #00F;
  cursor: move;
}
<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>

<div id="div1" class="droppable" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="removeDrop(event)">
  <input type="text" draggable="true" ondragstart="drag(event)" value="soy el primero">
  <input type="text" draggable="true" ondragstart="drag(event)" value="soy el segundo">
  <input type="text" draggable="true" ondragstart="drag(event)" value="soy el tercero">
</div>



<div id="div2" class="droppable" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="removeDrop(event)"></div>

4

Esto es por que estas colocando el mismo id para todos los input id="drag1", para solucionarlo modifica sus id

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

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {drag1
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
#div1, #div2 {
    float: left;
    width: 200px;
    height: 200px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
    }
<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <input type="text" draggable="true" ondragstart="drag(event)" id="drag1"> 
  <input type="text" draggable="true" ondragstart="drag(event)" id="drag2"> 
  <input type="text" draggable="true" ondragstart="drag(event)" id="drag3"> 
</div>



<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

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.