Glisser déposer et tableaux en HTML 5

**bj303931** · 16/03/2017, 16h50

J'aimerais remplacer la case d'un tableau complexe par un autre comme ci-dessous:

Nom : z.png
Affichages : 772
Taille : 17,2 Ko

J'ai fais le code du glisser/posé mais ça ne marche pas!

Merci, pour votre aide!

Code de la "tuile" (vraiment oui!

) à déplacer :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table border="1" cellpadding="5" onclick="tourner()" draggable="true" ondragstart="drag(event)"> // ici, j'ai copié ce qu'il fallait pour le glisser/poser 8O
    <tr >
        <th width="20%" id=1000></th>
        <th width="40%" id=1001></th>
        <th width="20%" id=1002></th>
    </tr ><tr>
        <th width="20%" height='25' id=1003></th>
        <th width="40%" height='25' ></th>
        <th width="20%" height='25' id=1004></th>
    </tr ><tr>
        <th width="20%" id=1005></th>
        <th width="40%" id=1006></th>
        <th width="20%" id=1007></th>
    </tr ><tr>
</table>

Le code du tableau receveur:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function cell(v){
var c=new cellule;
var taille=document.getElementById('taille').value;
var th=taille*2+1;
var tr=taille*2+1;
var i=0;
var j=0;
var cpt=0;
var id=0;
    for (i=0; i<tr; i++){
        if(tr%3==0){c.s=c.s+"<tr class='white'  ondrop='drop(event)' ondragover='allowDrop(event)'>";} // Ici est le glisser/poser...
        for(j=0; j<th; j++){
            if (pair(j)==0 && pair(i)==0){c.s=c.s+"<th width='60' height='80' onclick='clic("+id+")' id="+id+" class='white' ></th>";id++;}
            else if (pair(j)==0){
                cpt=cpt+1;
                if (noir[j]==1){c.s=c.s+"<th width='60' bgcolor='black' id="+id+" class='black' ></th>";id++;}
                else{c.s=c.s+"<th width='60' id="+id+" class='white' ></th>";id++;}
                }
            else{
            cpt=cpt+1;
            if (noir[j]==1){c.s=c.s+"<th bgcolor='black' id="+id+" class='black' ></th>";id++;}
            else{c.s=c.s+"<th id="+id+" class='white'></th>";id++;}}}
        c.s=c.s+"</tr><tr class='white'>";
    }
if(v==1){document.getElementById("c").innerHTML=c.s+"</table>";}
else{charger();}
}

Le code glisser/poser

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
    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));}

Merci pour votre aide!

**badaze** · 16/03/2017, 21h54

Essaie ça.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
<script>
 var htmlCode = "";
 var counter  = 0;
 
    function drop(anObject,ev){
        ev.preventDefault();
  htmlCode = document.getElementById('todrag').outerHTML;
 
  htmlCode = htmlCode.replace('todrag','todrag_'+counter);
  htmlCode = htmlCode.replace("id='th_","id='th_"+counter+"_"); 
  htmlCode = htmlCode.replace('ondragstart="drag(event)"','');
  htmlCode = htmlCode.replace('ondragstart="drag(event)"','');  
  counter++;
 
  anObject.innerHTML = htmlCode;
 
    } // function drop(anObject,ev)
 
 
    function allowDrop(anObject,ev){
     ev.preventDefault();
    } // function allowDrop(anObject,ev)    
 
 function dragEnter(anObject) {
 
 } // function dragEnter(anObject)
 
 function dragLeave(anObject) {
     htmlCode = "";
 } // function dragLeave(anObject) 
 
 function drag(ev) {
  // uniquement pour que le code ne plante pas
 }
</script>
<table id="todrag" border="1" cellpadding="5" onclick="tourner()" draggable="true" ondragstart="drag(event)"> 
    <tr >
        <th width="20%" id='th_1000'></th>
        <th width="40%" id='th_1001'></th>
        <th width="20%" id='th_1002'></th>
    </tr ><tr>
        <th width="20%" height='25' id='th_1003'></th>
        <th width="40%" height='25' ></th>
        <th width="20%" height='25' id='th_1004'></th>
    </tr ><tr>
        <th width="20%" id='th_1005'></th>
        <th width="40%" id='th_1006'></th>
        <th width="20%" id='th_1007'></th>
    </tr ><tr>
</table>
<hr/>
<table border="1" cellpadding="5" >
 <tr>
 <td draggable= 'false' align="center"  id= 'C01' ondrop='drop(this,event)' ondragover='allowDrop(this,event)' ondragenter="dragEnter(this)" ondragleave="dragLeave(this)">01</td>
 <td draggable= 'false' align="center"  id= 'C02' ondrop='drop(this,event)' ondragover='allowDrop(this,event)' ondragenter="dragEnter(this)" ondragleave="dragLeave(this)">02</td> 
 <td draggable= 'false' align="center"  id= 'C03' ondrop='drop(this,event)' ondragover='allowDrop(this,event)' ondragenter="dragEnter(this)" ondragleave="dragLeave(this)">03</td>
 <td draggable= 'false' align="center"  id= 'C04' ondrop='drop(this,event)' ondragover='allowDrop(this,event)' ondragenter="dragEnter(this)" ondragleave="dragLeave(this)">04</td> 
 </tr>
 <tr>
 <td draggable= 'false' align="center"  id= 'C11' ondrop='drop(this,event)' ondragover='allowDrop(this,event)' ondragenter="dragEnter(this)" ondragleave="dragLeave(this)">11</td>
 <td draggable= 'false' align="center"  id= 'C12' ondrop='drop(this,event)' ondragover='allowDrop(this,event)' ondragenter="dragEnter(this)" ondragleave="dragLeave(this)">12</td> 
 <td draggable= 'false' align="center"  id= 'C13' ondrop='drop(this,event)' ondragover='allowDrop(this,event)' ondragenter="dragEnter(this)" ondragleave="dragLeave(this)">13</td>
 <td draggable= 'false' align="center"  id= 'C14' ondrop='drop(this,event)' ondragover='allowDrop(this,event)' ondragenter="dragEnter(this)" ondragleave="dragLeave(this)">14</td> 
 </tr> 
</table>

Situation initiale :
Nom : 170316-001.JPG
Affichages : 718
Taille : 16,6 Ko

Après quelques drag & drop :
Nom : 170316-002.JPG
Affichages : 674
Taille : 23,9 Ko

**bj303931** · 17/03/2017, 13h47

merci pour votre réponse; j'ai résolu le problème mais il en est apparu un autre...

La solution qui marche:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<title>Le labyrinth de l'alpaga.</title>
<body>
 
<h1>Le labyrinth de l'alpaga</h1>
 
<script>
function allowDrop(ev) {
    ev.preventDefault();
}
 
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
</script>
 
<div id="un"ondrop="document.getElementById('un').innerHTML=d" ondragover="allowDrop(event)" ></div>
 
<br  >
<div id="deux" draggable="true" ondragstart="drag(event)"></div>
 
<script>
var u='<table  border="1" cellpadding="5" ><tr ><th width="20%" bgcolor="black"></th><th width="40%"></th><th width="20%" bgcolor="black"></th></tr ><tr><th width="20%" height="50" ></th><th width="40%" height="50" ></th><th width="20%" height="50" bgcolor="black"></th></tr ><tr><th width="20%"></th><th width="40%" bgcolor="black"></th><th width="20%"></th></tr ><tr></table>';
 
var d='<table border="1" cellpadding="5"><tr ><th width="20%"></th>    <th width="40%" bgcolor="black"></th><th width="20%"></th></tr ><tr>      <th width="20%" height="50" bgcolor="black" ></th><th width="40%" height="50" ></th><th width="20%" height="50" ></th></tr ><tr><th width="20%" bgcolor="black"></th><th width="40%"></th><th width="20%" bgcolor="black"></th></tr ><tr></table>';
 
document.getElementById("deux").innerHTML=d;
document.getElementById("un").innerHTML=u;
</script>
 
</body>
</html>

Mais, juste à la fin il y a une redirection vers ... http://www.deux.com

et je ne comprends pas d'où elle vient.

**magicshark** · 17/03/2017, 16h37

Bonjour,
le problème vient du ondrop qui doit faire ev.preventDefault();
donc le conseil c'est de déplacer le code dans le ondrop directement dans une fonction (qui pourrait être drop(ev) par exemple).

Glisser déposer et tableaux en HTML 5

JavaScript

Vue hybride

Discussions similaires

Partager

Partager