PROBLEMA Drag and drop HTML/JavaScript

mfm94

Utente Attivo
301
7
Ciao a tutti :) Devo fare due esercizi ("compiti delle vacanze" di Pasqua universitari) di HTML/JavaScript riguardanti il drag and drop e sto avendo un po di problemi.

Primo esercizio:
devo spostare dei div nelle celle di una tabella, copiandoli, in modo da simulare il giochino di molti anni fa che consisteva in una tavola di plastica con tanti buchetti in cui si incastravano dei chiodini colorati per fare dei disegni. Il mio problema è che scrivendo il codice "standard" per il drag and drop non riesco a posizionare i div dentro alla tabella...
Vi posto il codice che ho scritto:
HTML
Codice:
<!DOCTYPE html>


<html>


    <head>
    
        <title> Chiodini </title>
        
        <link rel="stylesheet" type="text/css" href="css/style.css">
        
        <script src="js/script.js"></script>
    
    </head>
    
    <body>
    
        <h1> Chiodini </h1>
        
        <p> Sposta i chiodini sulla tabella per comporre un disegno </p>
        
        <table id="container">
            <tr>
                <td><div id="dest" ondrop="drop(event)" ondragover="dragOver(event)"></div></td>
                <td><div id="dest" ondrop="drop(event)" ondragover="dragOver(event)"></div></td>
                <td><div id="dest" ondrop="drop(event)" ondragover="dragOver(event)"></div></td>
            </tr>
            <tr>
                <td><div id="dest" ondrop="drop(event)" ondragover="dragOver(event)"></div></td>
                <td><div id="dest" ondrop="drop(event)" ondragover="dragOver(event)"></div></td>
                <td><div id="dest" ondrop="drop(event)" ondragover="dragOver(event)"></div></td>
            </tr>
            <tr>
                <td><div id="dest" ondrop="drop(event)" ondragover="dragOver(event)"></div></td>
                <td><div id="dest" ondrop="drop(event)" ondragover="dragOver(event)"></div></td>
                <td><div id="dest" ondrop="drop(event)" ondragover="dragOver(event)"></div></td>
            </tr>
        </table>
        
        <br>
        
        <div id="blue" draggable="true" ondragstart="drag(event)"></div>
        
        <!--<div class="green"></div>
        
        <div class="red"></div>
        
        <div class="yellow"></div>-->
    
    </body>


</html>
JavaScript
Codice:
function drag(ev) {
    ev.dataTransfer.setData("text/html", ev.target.id);
    ev.dataTransfer.effectAllowed = "copy";
}


function dragOver(ev) {
    ev.preventDefault();
}
         
function drop(ev) {
    ev.preventDefault();
    var id = ev.dataTransfer.getData("text/html");
    var nodeCopy = document.getElementById(id).cloneNode(true);
    nodeCopy.id = "newId";
    ev.target.appendChild(nodeCopy);
}


function dragEnd(ev) {
    ev.dataTransfer.clearData();
}

Secondo esercizio:
devo creare una sorta di puzzle, ovvero trascinare dei pezzi di immagine dentro a una tabella e ricomporre l'immagine di partenza. Ci sono due cose che non riesco a fare:
1) annullare il drop de nella casella di rilascio c'è già un'immagine (al momento se lo faccio il pezzo di img che vado a lasciare lo perdo)
2) in qualche modo, quando la tabella è "piena", controllare che il puzzle sia stato costruito in modo corretto.
Vi posto il codice che ho scritto:
HTML
Codice:
<!DOCTYPE html>


<html lang="it">


    <head>
    
        <meta charset="utf-8">
        
        <title> Puzzle </title>
        
        <link rel="stylesheet" type="text/css" href="css/style.css">
        
        <script src="js/script.js"></script>
    
    </head>


    <body>
    
        <h1 id="titolo"> Puzzle </h1>
        
        <p> Risolvi questo "impossibile" puzzle e potrai ritenerti una mente suprema </p>
    
        <table id="puzzleholder">
            <tr>
                <td><div id="dest" ondrop="drop(event)" ondragover="dragOver(event)"></div></td>
                <td><div id="dest" ondrop="drop(event)" ondragover="dragOver(event)"></div></td>
                <td><div id="dest" ondrop="drop(event)" ondragover="dragOver(event)"></div></td>
            </tr>
            <tr>
                <td><div id="dest" ondrop="drop(event)" ondragover="dragOver(event)"></div></td>
                <td><div id="dest" ondrop="drop(event)" ondragover="dragOver(event)"></div></td>
                <td><div id="dest" ondrop="drop(event)" ondragover="dragOver(event)"></div></td>
            </tr>
            <tr>
                <td><div id="dest" ondrop="drop(event)" ondragover="dragOver(event)"></div></td>
                <td><div id="dest" ondrop="drop(event)" ondragover="dragOver(event)"></div></td>
                <td><div id="dest" ondrop="drop(event)" ondragover="dragOver(event)"></div></td>
            </tr>
        </table>
        
        <br>
        
        <div id="container" ondrop="drop(event)" ondragover="dragOver(event)">
            <img src="http://www.tomshw.it/forum/images/vb21.jpeg" id="21" draggable="true" ondragstart="dragStart(event)" ondragend="dragEnd(event)">
        </div>
        
        <div id="container" ondrop="drop(event)" ondragover="dragOver(event)">
            <img src="http://www.tomshw.it/forum/images/vb11.jpeg" id="11" draggable="true" ondragstart="dragStart(event)" ondragend="dragEnd(event)">
        </div>
        
        <div id="container" ondrop="drop(event)" ondragover="dragOver(event)">
            <img src="http://www.tomshw.it/forum/images/vb01.jpeg" id="01" draggable="true" ondragstart="dragStart(event)" ondragend="dragEnd(event)">
        </div>
    
        <div id="container" ondrop="drop(event)" ondragover="dragOver(event)">
            <img src="http://www.tomshw.it/forum/images/vb12.jpeg" id="12" draggable="true" ondragstart="dragStart(event)" ondragend="dragEnd(event)">
        </div>


        <div id="container" ondrop="drop(event)" ondragover="dragOver(event)">
            <img src="http://www.tomshw.it/forum/images/vb02.jpeg" id="02" draggable="true" ondragstart="dragStart(event)" ondragend="dragEnd(event)">
        </div>


        <div id="container" ondrop="drop(event)" ondragover="dragOver(event)">
            <img src="http://www.tomshw.it/forum/images/vb00.jpeg" id="00" draggable="true" ondragstart="dragStart(event)" ondragend="dragEnd(event)">
        </div>


        <div id="container" ondrop="drop(event)" ondragover="dragOver(event)">
            <img src="http://www.tomshw.it/forum/images/vb22.jpeg" id="22" draggable="true" ondragstart="dragStart(event)" ondragend="dragEnd(event)">
        </div>


        <div id="container" ondrop="drop(event)" ondragover="dragOver(event)">
            <img src="http://www.tomshw.it/forum/images/vb10.jpeg" id="10" draggable="true" ondragstart="dragStart(event)" ondragend="dragEnd(event)">
        </div>


        <div id="container" ondrop="drop(event)" ondragover="dragOver(event)">
            <img src="http://www.tomshw.it/forum/images/vb20.jpeg" id="20" draggable="true" ondragstart="dragStart(event)" ondragend="dragEnd(event)">
        </div>


    </body>
    
</html>
JavaScript
Codice:
function dragStart(ev) {
    var source = ev.target;
    ev.dataTransfer.setData("text", ev.target.id);
    ev.effectAllowed = "move";
}


function dragOver(ev) {
        ev.dataTransfer.clearData();
}


function drop(ev) {
    ev.preventDefault();
    var id = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(id));
}


function dragEnd(ev) {
    ev.dataTransfer.clearData();
}

Vi chiedo solo una cosa: non datemi consigli riguardanti l'utilizzo di jquery o simili perché ci è stato esplicitamente chiesto di usare HTML e JavaScript (anche perché al momento non abbiamo visto altro (eccezione fatta per il CSS))

- - - Updated - - -

UPDATE
per il secondo esercizio ho risolto il problema "1" utilizzando "istanceof". Gli altri problemi rimangono XD
 
Ultima modifica:

Entra

oppure Accedi utilizzando
Discord Ufficiale Entra ora!