javascript中如何获取拖动项的文本

Question

I am learning about drag and drop and I created this simple script (Run script) to check

 function onDrag(ev) { console.log('You are dragging', ev.target.className) } function onDrop(ev) { ev.preventDefault(); var ul = ev.target; var li = document.createElement('li'); li.appendChild(document.createTextNode("Text?")); ul.parentElement.appendChild(li); } function onOverDrop(ev) { ev.preventDefault(); }

 ul, li{border:1px solid green}.container-left, .container-right {width:45%; margin-left:1%; float:left}

 <div class="container-left"> <ul> <li class="A" draggable="true" ondragstart="onDrag(event)">A</li> <li class="B" draggable="true" ondragstart="onDrag(event)">B</li> <li class="C" draggable="true" ondragstart="onDrag(event)">C</li> <li class="D" draggable="true" ondragstart="onDrag(event)">D</li> </ul> </div> <div class="container-right"> <ul> <li> 1 <ul ondrop="onDrop(event)" ondragover="onOverDrop(event)"> <li class="1"></li> </ul> </li> <li> 2 <ul ondrop="onDrop(event)" ondragover="onOverDrop(event)"> <li class="2"></li> </ul> </li> <li> 3 <ul ondrop="onDrop(event)" ondragover="onOverDrop(event)"> <li class="3"></li> </ul> </li> <li> 4 <ul ondrop="onDrop(event)" ondragover="onOverDrop(event)"> <li class="4"></li> </ul> </li> </ul> </div>

The issue I have is that inside onDrop method I would like the text and class of the item I am dragging. For example when I drag A into the right side and drop it, instead of getting Text? I want to get A

Answer 1

Create a variable to store the classname of the item you're dragging, append the ev.target.className to the variable on drag.

 let classNameOfItem = '' function onDrag(ev) { console.log('You are dragging', ev.target.className) classNameOfItem = ev.target.className } function onDrop(ev) { ev.preventDefault(); var ul = ev.target; var li = document.createElement('li'); li.appendChild(document.createTextNode(classNameOfItem)); ul.parentElement.appendChild(li); } function onOverDrop(ev) { ev.preventDefault(); }

 ul, li{border:1px solid green}.container-left, .container-right {width:45%; margin-left:1%; float:left}

 <div class="container-left"> <ul> <li class="A" draggable="true" ondragstart="onDrag(event)">A</li> <li class="B" draggable="true" ondragstart="onDrag(event)">B</li> <li class="C" draggable="true" ondragstart="onDrag(event)">C</li> <li class="D" draggable="true" ondragstart="onDrag(event)">D</li> </ul> </div> <div class="container-right"> <ul> <li> 1 <ul ondrop="onDrop(event)" ondragover="onOverDrop(event)"> <li class="1"></li> </ul> </li> <li> 2 <ul ondrop="onDrop(event)" ondragover="onOverDrop(event)"> <li class="2"></li> </ul> </li> <li> 3 <ul ondrop="onDrop(event)" ondragover="onOverDrop(event)"> <li class="3"></li> </ul> </li> <li> 4 <ul ondrop="onDrop(event)" ondragover="onOverDrop(event)"> <li class="4"></li> </ul> </li> </ul> </div>