如何在JS中拖放if..else语句

Question

The result i want from the the below code is: 1. There are three text: Drag me!, Drag me2!, Drag me3! 2. One of the text will be drag to the last empty box 3. demo2 will display the text of the drop text

But what i have done will only display the "Drag me3!" How can I done the 1, 2 & 3 by using if...else statement?

 function dragStart(ev) { ev.dataTransfer.setData("Text", ev.target.id); document.getElementById("demo").innerHTML = "Started to drag the p element"; } function allowDrop(ev) { ev.preventDefault(); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); document.getElementById("demo").innerHTML = "The p element was dropped"; var x = document.getElementById("dragtarget1").textContent; var y = document.getElementById("dragtarget2").textContent; var z = document.getElementById("dragtarget3").textContent; document.getElementById("demo2").innerHTML = x; document.getElementById("demo2").innerHTML = y; document.getElementById("demo2").innerHTML = z; } 

 .droptarget { float: left; width: 100px; height: 35px; margin: 15px; padding: 10px; border: 1px solid #aaaaaa; } 

 <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"> <p ondragstart="dragStart(event)" draggable="true" id="dragtarget1">Drag me!</p> </div> <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"> <p ondragstart="dragStart(event)" draggable="true" id="dragtarget2">Drag me2!</p> </div> <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"> <p ondragstart="dragStart(event)" draggable="true" id="dragtarget3">Drag me3!</p> </div> <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <p style="clear:both;"><strong>Note:</strong> drag events are not supported in Internet Explorer 8 and earlier versions or Safari 5.1 and earlier versions.</p> <p id="demo"></p> <p id="demo2"></p> 

Answer 1

The reason why you are seeing the behavior that you listed above is because of your line of code var x = document.getElementById("dragtarget").textContent; . What this code is doing is getting the text context of the element with that specific ID ( dragtarget ) and setting it to the inner HTML content of the id=demo2 every time. Instead of searching for a specific element with a specific ID, you need to use a more dynamic solution that looks in the event object received by the drop() function to determine what text to set in the demo2 element.