Dragged item disappears on drop

Question

I have a draggable picture and 2 divs as a drop target. You are supposed to drag the item back and forth between those 2 divs. I also have a text inside the divs which I want to disappear when item dropped on it (and possibly appear again when dragged from.)

I'm using this and it makes the text disappear but the thing is that the photo disappears as well and cannot be dragged again.

Can someone see where the problem could be? Thanks

 function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); if (ev.target.id == 0) { document.getElementById('0').textContent = ''; } else if (ev.target.id == 1){ document.getElementById('1').textContent = ''; } } 

 <div class="inbl photo"><img src="pic.jpg" ondragstart="drag(event)" id="drag1"></img></div> <div id="0" class="dragdiv1" ondrop="drop(event)" ondragover="allowDrop(event)">Drag&Drop Area</div> <div id="1" class="dragdiv2" ondrop="drop(event)" ondragover="allowDrop(event)">Drag&Drop Area</div> 

Answer 1

This is happening because when you set the textContent property, any child nodes are removed and replaced by a single Text node containing the specified string. So you are replacing your dropped img with the new text/empty string.

Append the image after clearing the text.

 .dropdiv { width: 100px; height: 100px; border: 1px solid #000; float: left; margin: 20px; } img { border: 1px solid #000; } 

 <div id="drop0" class="dropdiv" ondrop="drop(event)" ondragover="allowDrop(event)">Drag&Drop Area 1</div> <div id="drop1" class="dropdiv" ondrop="drop(event)" ondragover="allowDrop(event)">Drag&Drop Area 2</div> <img src="https://dummyimage.com/100" ondragstart="drag(event)" draggable="true" id="drag1" /> <script> function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); if (ev.target.id == 'drop0') { document.getElementById('drop0').innerText = ""; } else if (ev.target.id == 'drop1'){ document.getElementById('drop1').innerText = ""; } document.getElementById(data).style.border='none'; ev.target.appendChild(document.getElementById(data)); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function allowDrop(ev) { ev.preventDefault(); } </script> 

Answer 2

your code is removing the items after drop.

call the appendchild method after the if statement.

 function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); if (ev.target.id == 0) { document.getElementById('0').textContent = ''; document.getElementById('1').textContent = 'some text' } else if (ev.target.id == 1){ document.getElementById('0').textContent = 'some other text'; document.getElementById('1').textContent = ''; } ev.target.appendChild(document.getElementById(data)); }