JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="elementi_da_trascinare" ondragstart="iniziaTrascinamento(event)">
        <li draggable="true" data-icona="http://bit.ly/h5Khyt" data-valore="0.5">50 Centesimi</li>
        <li draggable="true" data-icona="http://bit.ly/gnyFfh" data-valore="1" > 1 Euro</li>
        <li draggable="true" data-icona="http://bit.ly/eXq6y5" data-valore="2" > 2 Euro</li>
        <li draggable="true" data-icona="http://bit.ly/hiftBg" data-valore="10"> 10 Euro</li>
    </ul>
    <div    id="portamonete" 
            draggable="false" 
            
            ondragenter="ingressoInZonaDiDrop(event)"
            ondragleave="uscitaZonaDiDrop(event)" 
            ondragover="trascinamentoInZonaDiDrop(event)"
            ondrop="rilascioDellOggettoTrascinato(event)"
></div>
    <p> Il portamonete contiene: <output id="sommatoria">0</output> euro</p>

CSS

#portamonete{
    background-color: green;
    height: 100px;    
    width: 100px;
    border-radius: 50px;
}

JavaScript

iniziaTrascinamento = function(evento){
    evento.dataTransfer.setData("text", event.target.dataset.valore);
    icona = document.createElement('img');
    icona.src = evento.target.dataset.icona;
    evento.dataTransfer.setDragImage(icona, -10, -10);
}

ingressoInZonaDiDrop = function(evento){
    //evento.target.src = "http://bit.ly/gRo6cc";
    evento.target.style.background = 'red';
    evento.preventDefault();
}

uscitaZonaDiDrop = function(evento){
    evento.target.style.background = 'green';
}

trascinamentoInZonaDiDrop = function(evento){
    evento.dataTransfer.dropEffect = 'copy';
    evento.preventDefault();
}

rilascioDellOggettoTrascinato = function(evento){
    sommatoria = document.getElementById("sommatoria");
    sommatoria.innerHTML = parseFloat(sommatoria.innerHTML) + parseFloat(evento.dataTransfer.getData("text"));
    //evento.target.src = "http://bit.ly/gZH4H5";
}