Effetto drag and drop applicato a scacchiera

**PANDREA** · 07-10-2016, 23:30

Spero che il titolo sia abbastanza eloquente. Ho aperto giï¿½ una discussione dove si parlava di una scacchiera (e spero anche che i moderatori non debbano riprendermi perchï¿½ ne apro una nuova ora), ma, in quella, le soluzioni su cui chiedevo chiarimenti erano diverse da quelle su cui chiedo consiglio ora. Con permesso dunque, espongo ciï¿½ che ho:

codice:

<table id="scacchiera">
<tr>
<td id="a1"><font draggable="true"> <!-- carattere scacchistico da trascinare -- > </font> </td>
<td id="a2"> <!-- vuoto --> </td>
</tr>
<table>

Come rendere entrambe le caselle target per l'elemento trascinabile? E poi, come adattare il mio contenuto con i relativi id allo script (che copio e incollo dal sito w3schools)?

codice:

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

Ringrazio quanti risponderanno e di nuovo l'organizzazione di questo forum. Grazie, Andrea

**PANDREA** · 09-10-2016, 16:42

Il Problema che non riesco a risolvere è principalmente cosa dover scrivere quando i "dati" trascinabili sono più di uno e vengono trascinati uno alla volta, perchè, fondamentalmente, la scrittura che proponevo sopra è del tutto corretta!

**badaze** · 09-10-2016, 18:03

Ecco una bozza. Funzione con Firefox ma non con IE.

codice HTML:

<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
 .drop1{
 background-color:yellow;
 }
 .drop2{
 background-color:green;
 }
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
 var dragFrom = null;
 function allowDrop(ev){
         ev.preventDefault();
 }    
 
 function drag(ev){
         ev.dataTransfer.setData("text", ev.target.id);
 }    
 
 function drop(anObject,ev){
         ev.preventDefault();
     var data = ev.dataTransfer.getData("text");        
     if (anObject.innerHTML != '') {
       document.getElementById('log').innerHTML = document.getElementById('log').innerHTML + anObject.innerHTML;
      anObject.innerHTML = '';
     }
     anObject.appendChild(document.getElementById(data));
 }
//-->
</script>
</head>
<body>
<table summary="">
<tr style="border:1px solid black">
  <td width="150">P1</td><td width="150">P2</td><td width="150">P3</td><td width="150">P4</td>
</tr>
<tr style="border:1px solid black">
<td width="150" class= 'drop1' id= 'p1' ondrop='drop(this,event)' ondragover='allowDrop(event)' >
  <div id='a1000' draggable= 'true'  ondragstart= 'drag(event)'>1000</div>
</td>
<td width="150" class= 'drop2' id= 'p2' ondrop='drop(this,event)' ondragover='allowDrop(event)'>
  <div id='a1001' draggable= 'true'  ondragstart= 'drag(event)'>1001</div> 
</td>

<td width="150" class= 'drop1' id= 'p3' ondrop='drop(this,event)' ondragover='allowDrop(event)'>
  <div id='a1002' draggable= 'true'     ondragstart= 'drag(event)'>1002</div>
</td>
<td width="150" class= 'drop2' id= 'p4' ondrop='drop(this,event)' ondragover='allowDrop(event)'>
  <div id='a1003' draggable= 'true'     ondragstart= 'drag(event)'>1003</div> 
</td>
</tr>
</table>
Pezzi presi :
<div id="log"></div>
</body>
</html>

**PANDREA** · 10-10-2016, 17:35

grazie badaze!!!!! ti chiedo un'ultima cosa poi prometto più niente....mi potresti spiegare come faccio a draggare più volte lo stesso elemento da una sola figura? e poi, ora che mi viene in mente... ho fatto anche la scacchiera per il gioco della dama: c'è possibilità di applicare questa funzione che toglie automaticamente i pezzi dalla scacchiera anche lì dove la pedina mangia "saltando" da una cella, passando per una seconda cella dove c'è la pedina avversaria e si posa su di una terza cella? ti posto il codice della pagina sta venendo carina! ciao! e grazie di nuovo! Andrea

codice:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<style>

td {

width: 50px;
height: 50px;

}

div {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 40px;
    
}

.pedine

{

width: 250px;
height: 250px;
font-size: 20px;
text-align: justify;
border-color: black;


}

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

</script>
</head>
<body bgcolor="grey">

<h5 align="center"> DAMA INTERNAZIONALE</h5>

<hr>

<br><br>

<table cellspacing="0" align="center" width="1000px" bgcolor="lightyellow">
<tr>

<td rowspan="5" width="250px" bgcolor="grey"><div class="pedine" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="div"></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"> <font draggable="true" ondragstart="drag(event)" id="drag1">●</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag2">●</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag3">●</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag4">●</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag5">●</font></div></td>
<td rowspan="5" width="250px" bgcolor="grey"><div class="pedine" align="center">&nbsp;&nbsp;&nbsp;<font draggable="true" ondragstart="drag(event)" id="drag41" >■</font> <font draggable="true" ondragstart="drag(event)" id="drag42">□</font></div></td>

</tr>
<tr>

<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag6">●</font> </div></td>
<td><div id="div" > </div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag7">●</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag8">●</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag9">●</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag10">●</font></div></td>
<td><div id="div" ></div></td>

</tr>
<tr>
<td><div id="div"></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"> <font draggable="true" ondragstart="drag(event)" id="drag11">●</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag12">●</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag13">●</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag14">●</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag15">●</font></div></td>
</tr>
<tr>

<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag16">●</font> </div></td>
<td><div id="div" > </div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag17">●</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag18">●</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag19">●</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag20">●</font></div></td>
<td><div id="div" ></div></td>
</tr>
<tr>
<td><div id="div"></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="div"></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="div"></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="div"></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="div"></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
</tr>
<tr>
<td rowspan="5" width="250px" bgcolor="grey"><div class="pedine" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="div"></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="div"></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="div"></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="div"></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><div id="div"></div></td>
<td rowspan="5" width="250px" bgcolor="grey"><div class="pedine" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
</tr>
<tr>
<td><div id="div"></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"> <font draggable="true" ondragstart="drag(event)" id="drag21">○</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag22">○</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag23">○</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag24">○</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag25">○</font></div></td>
</tr>
<tr>

<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag26">○</font> </div></td>
<td><div id="div" > </div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag27">○</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag28">○</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag29">○</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag30">○</font></div></td>
<td><div id="div" ></div></td>
</tr>
<tr>
<td><div id="div"</div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"> <font draggable="true" ondragstart="drag(event)" id="drag31">○</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag32">○</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag33">○</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag34">○</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag35">○</font></div></td>
</tr>
<tr>

<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag36">○</font> </div></td>
<td><div id="div" > </div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag37">○</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag38">○</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag39">○</font></div></td>
<td><div id="div" ></div></td>
<td bgcolor="darkorange"><div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"><font draggable="true" ondragstart="drag(event)" id="drag40">○</font></div></td>
<td><div id="div" ></div></td>
</tr>
</table>




</body>
</html>

È qui che dovrei mettere due dame (a destra della scachiera) che saranno per forza di cose rappresentate da quadrati (uno nero e uno vuoto) e volevo metterne solo due in maniera tale da poter ogni volta che mi serve una dama draggare dalla singola immagine! ciao!

**PANDREA** · 10-10-2016, 17:44

Sarebbe bello se esistesse il modo per tradurre in funzione la frase: se tra posizione 0 di a e posizione n di a c'è l'elemento b, allora a ha catturato l'elemento b e quest'ultimo va tolto dalla scacchiera (nella dama internazionale le pedine mangiano anche all'indietro e mangiano anche le dame e la dama può mangiare una pedina anche a distanza di n caselle) Ciao Badaze! Grazie per il concreto insegnamento in materia!

**PANDREA** · 11-10-2016, 23:53

Cercando sul sito di HTML.it, ho trovato un esempio di dama in javascript, ma non comprendo dove sia la funzione a cui farei riferimento (se esiste) al messaggio #5...

**badaze** · 16-10-2016, 20:42

Mi sono divertito a fare questo.

Guarda anche il messaggio #9 per lo zip con le immagini.

Copia le immagini nella stessa cartella del file.html.

Testato con Firefox.

**badaze** · 16-10-2016, 20:43

Altre 2 immagini.

**badaze** · 16-10-2016, 20:48

Le 4 immagini sono nel file .zip allegato.

**PANDREA** · 16-10-2016, 21:23

un grande badaze!

Discussione: Effetto drag and drop applicato a scacchiera

Strumenti discussione

Ricerca discussione

Visualizza

Effetto drag and drop applicato a scacchiera

Permessi di invio