How to prevent element dragged from leaving its place - html

Question

Please check the live code:
I am trying to make a drag and drop but dragged item must be duplication (not moved from one place to another)
let injectableEL = ''
function onDrag(ev) {
console.log('onDrag', ev.target);
injectableEL = ev.target
// ev.preventDefault();
}
function onDrop(ev) {
el = document.getElementById("title");
var span = document.createElement('span');
span.appendChild(document.createTextNode("x"));
var ul = ev.target;
ul.appendChild(injectableEL);
}
function onOverDrop(ev) {
ev.preventDefault();
}
ul, li{border:1px solid green}
.mystyle {padding:5px; background:red; cursor: grab;}
.container-left, .container-right {width:45%; margin-left:1%; float:left}
<h4 id="title"> <span><b> Title </b></span> </h4>
<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> Regression
<ul ondrop="onDrop(event)" ondragover="onOverDrop(event)" style="height:50px">
</ul>
</li>
<li> New Feature
<ul ondrop="onDrop(event)" ondragover="onOverDrop(event)" style="height:50px">
</ul>
</li>
<li> Hot fix
<ul ondrop="onDrop(event)" ondragover="onOverDrop(event)" style="height:50px">
</ul>
</li>
</ul>
</div>
In the example I am sharing, once the user drags any letter and drops it on the side, the letters disappear from original place.
I am try to keep them as they are, possible just change the color to indicaate it has been moved.
How can I do this?