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:
- Mueves un nodo del
#div1
al #div2
, éste es el primer nodo #drag1
hijo de #div1
y puedes moverlo.
- 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.
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
.
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.
- 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>