Drag&Drop

**Hans Castorp** · 15-09-2018, 21:32

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>

**Hans Castorp** · 16-09-2018, 12:25

Ho risolto, chiedo ai mod di chiudere.
Grazie mille, buona domenica a tutti.

**Vincent.Zeno** · 16-09-2018, 12:27

ciao hans, come utente del forum sai che questo non è un servizio di assistenza privata.
che ne dici di condividere la tua soluzione?

**Hans Castorp** · 16-09-2018, 15:35

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>

**Hans Castorp** · 16-09-2018, 21:19

Adesso mi si presentano due nuovi problemi:
1. Vorrei che il "div ombra" apparisse soltanto quando ho completamente droppato il suo originale, mentre adesso il "div ombra" compare subito, non appena clicco sulla parola;
2. Devo riuscire e disabilitare il droppable in alcuni div specifici, in modo che i div trascinati non si annidino l'uno dentro l'altro.

Se riesco a risolvere posto le soluzioni!

**cavicchiandrea** · 16-09-2018, 21:49

io userei (riadattandolo) questo https://jqueryui.com/droppable/#revert

**Hans Castorp** · 17-09-2018, 16:43

Sono riuscito ad evitare il problema due "disannidando" i div annidati in altri, e spostandoli con l'attributo "position" impostato sul valore "relative", in modo tale da sovrapporli ai primi, ma senza che diventino "droppabili": per il problema che avevo va benissimo, dato che si trattata sostanzialmente di etichette di testo.

**Hans Castorp** · 19-09-2018, 08:38

Ho risolto inserendo l'attributo dragEnd che mancava. Benissimo.

Adesso avrei la necessità di iterare questo script per "n" volte. Come posso iterare uno script senza ricorrere a php?

codice:

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));     }

Discussione: Drag&Drop

Strumenti discussione

Ricerca discussione

Visualizza

Drag&Drop

Permessi di invio