Below is the structure of a UL tag in my code:
<ul ondrop="drop(event)" ondragover="allowDrop(event)">
<li class="item" draggable="true" ondragstart="dragStart(event)" ondrag="dragging(event)">
<div class="product-infos">
<a href="javascript:;"></a>
</div>
</li>
</ul>
I am looking to achieve the functionality where I can drag the entire LI element and drop it into another UL element using JavaScript.
<script>
function allowDrop(event) {
event.preventDefault();
}
function dragStart(event) {
event.dataTransfer.setData("Text", event.target);
}
function dragging(event) {
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
</script>
The issue I am facing is that when users click on different elements like "div" or "a", the drag operation fails as I end up appending the wrong child to the UL element. This results in the following error:
Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
I want to enable dragging the entire element regardless of where the user clicks. Any suggestions for a solution would be greatly appreciated.