How to get the text of dragged item in 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>