Ciao a tutti,
ho bisogno di un suggerimento per un esercizio che vorrei preparare utilizzando il Dra&Drop. In sostanza, l'utente dovrebbe trascinare nei campi appositi le parole corrette di una frase. Un tasto poi lo informa se la sua soluzione è corretta oppure no.
Il mio problema è il seguente: avrei bisogno, ad ogni trascinamento di parola, di creare una copia esattamente identica della parola appena trascinata. Come soluzione molto "personale", ho pensato di stampare a schermo tramite php un doppione della parola con attributo "display:none", per poi, al momento del trascinamento, di renderlo visibile. E funziona.
Il problema tuttavia è che dovrei riuscire a intercettare il movimento di un singolo div e di associare al suo drag&drop la comparsa dell'altro div corrispondente e nascosto. E questo non riesco a farlo. Qualcuno sa consigliarmi?
Allego il codice intero. Grazie a tutti per l'aiuto.


codice:
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>

.frase {color:grey; font-size:20px; font-family:calibri; padding:10px; border:solid grey 2px;background:#f5f5f5;border-radius:10px; display:inline-block}
.parola {display:inline-block; border:solid red 1px; padding:5px}

#div1, #div3, #div5 {display:inline; float:left; }

#div2, #div4, #div6
    {
    margin: 10px;
    border: 1px solid black;
    height:30px;
    }
    
    #dragpre1, #dragpre2, #dragpre3 {display:none; color:red}
</style>

<script>


function allowDrop(ev) {ev.preventDefault();}
function drag(ev) {ev.dataTransfer.setData("text", ev.target.id);}
function drop(ev)
    {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
    $("#dragpre1").css("display","inline-block");
    $("#dragpre2").css("display","inline-block");
    $("#dragpre3").css("display","inline-block");
    }




</script>
</head>
<body>


<div class="frase" ondrop="drop(event)">

<div class="parola" id="dragpre1">Fuori</div>
<div class="parola" draggable="true" ondragstart="drag(event)" id="drag1">Fuori</div>

<div class="parola" id="dragpre2">nevica</div>
<div class="parola" draggable="true" ondragstart="drag(event)" id="drag3">nevica</div>

<div class="parola" id="dragpre3">copiosamente</div>
<div class="parola" draggable="true" ondragstart="drag(event)" id="drag5">copiosamente</div>

<div class="parola">.</div>
</div>







<br><br><br>

<div class="soggetto soggetto-bivalente" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">Qui trascina "Fuori"</div>
<div class="verbo verbo-bivalente" id="div4" ondrop="drop(event)" ondragover="allowDrop(event)">Qui trascina "nevica"</div>
<div class="oggetto-diretto oggetto-diretto-bivalente" id="div6" ondrop="drop(event)" ondragover="allowDrop(event)">Qui trascina "copiosamente"</div>

<br>

<div class="cestino"  ondrop="drop(event)" ondragover="allowDrop(event)" style="height:50px; border:solid 1px grey">Metti qui le voci non utilizzate</div>

<br>

<button onclick="myFunction()">CONTROLLA</button>


<script>

function myFunction()
{
if ($("#div6").find("#drag5").length > 0 && $("#div2").find("#drag1").length > 0 && $("#div4").find("#drag3").length > 0)
    { 
        alert("ok");
    }

else {
    alert("ricontrolla...");
}

}
 








</script>

</body>
</html>