Condivido volentieri! Soltanto che è una soluzione da neandertaliano quale sono!
In pratica, in ciascun div, creo una funzione di drag&drop specifica, e per ciascuna, al trascinamento, rendo visibile il "div ombra". Sicuramente c'è una soluzione migliore, più elegante e perfettibile, ma per ora mi accontento di questa:
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
{
height:100px;
width:200px;
border:solid blue 2px;
text-align:center;
}
#dragpre1, #dragpre3, #dragpre5 {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)); }
function dragStart1(event) {event.dataTransfer.setData("Text", event.target.id); document.getElementById("dragpre1").style.display = "inline-block";}
function dragEnd1(event) {document.getElementById("dragpre1").style.display = "inline-block";}
function allowDrop1(event) {event.preventDefault();}
function drop1(event) {event.preventDefault(); var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); }
function dragStart3(event)
{
event.dataTransfer.setData("Text", event.target.id);
document.getElementById("dragpre3").style.display = "inline-block";
}
function dragEnd3(event)
{
document.getElementById("dragpre3").style.display = "inline-block";
}
function allowDrop3(event)
{
event.preventDefault();
}
function drop3(event)
{
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
function dragStart5(event)
{
event.dataTransfer.setData("Text", event.target.id);
document.getElementById("dragpre5").style.display = "inline-block";
}
function dragEnd5(event)
{
document.getElementById("dragpre5").style.display = "inline-block";
}
function allowDrop5(event)
{
event.preventDefault();
}
function drop5(event)
{
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div class="frase">
<div class="parola" id="dragpre1">Fuori</div>
<div class="parola" id="drag1" draggable="true" ondragstart="dragStart1(event)" ondragstart="drag(event)" ondrop="drop1(event)" ondragover="allowDrop1(event)">Fuori</div>
<div class="parola" id="dragpre3">nevica</div>
<div class="parola" id="drag3" draggable="true" ondragstart="dragStart3(event)" ondragstart="drag(event)" ondrop="drop3(event)" ondragover="allowDrop3(event)">nevica</div>
<div class="parola" id="dragpre5">copiosamente</div>
<div class="parola" id="drag5" draggable="true" ondragstart="dragStart5(event)" ondragstart="drag(event)" ondrop="drop5(event)" ondragover="allowDrop5(event)">copiosamente</div>
<div class="parola">.</div>
</div>
<br><br><br>
<div class="nucleo">
<div class="argomento soggetto soggetto-bivalente" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">Qui trascina "Fuori"</div>
<div class="argomento verbo verbo-bivalente" id="div4" ondrop="drop(event)" ondragover="allowDrop(event)">Qui trascina "nevica"</div>
<div class="argomento oggetto-diretto oggetto-diretto-bivalente" id="div6" ondrop="drop(event)" ondragover="allowDrop(event)">Qui trascina "copiosamente"</div>
</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>