1. #1
    Membre à l'essai Avatar de bj303931
    Femme Profil pro
    Étudiant
    Inscrit en
    février 2016
    Messages
    47
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : février 2016
    Messages : 47
    Points : 21
    Points
    21

    Par défaut Glisser déposer et tableaux en HTML 5

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

    Nom : z.png
Affichages : 62
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!

  2. #2
    Membre éprouvé Avatar de badaze
    Homme Profil pro
    Chef de projets info
    Inscrit en
    septembre 2002
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Chef de projets info
    Secteur : Transports

    Informations forums :
    Inscription : septembre 2002
    Messages : 645
    Points : 1 006
    Points
    1 006

    Par défaut

    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 : 42
Taille : 16,6 Ko

    Après quelques drag & drop :

    Nom : 170316-002.JPG
Affichages : 44
Taille : 23,9 Ko
    Cela ne sert à rien d'optimiser quelque chose qui ne fonctionne pas.

    Mon site : www.emmella.fr

    Je recherche le manuel de l'Olivetti Logos 80B.

  3. #3
    Membre à l'essai Avatar de bj303931
    Femme Profil pro
    Étudiant
    Inscrit en
    février 2016
    Messages
    47
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : février 2016
    Messages : 47
    Points : 21
    Points
    21

    Par défaut

    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.

  4. #4
    Membre averti
    Avatar de magicshark
    Homme Profil pro
    Dans une SS2I donc pas que JAVA
    Inscrit en
    octobre 2011
    Messages
    128
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Dans une SS2I donc pas que JAVA
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : octobre 2011
    Messages : 128
    Points : 314
    Points
    314

    Par défaut

    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).
    Pourquoi faire simple quand on peut faire compliqué.

Discussions similaires

  1. [Tableaux] PHP HTML Table et navigateur
    Par amy0o0 dans le forum Fonctions
    Réponses: 9
    Dernier message: 04/06/2007, 14h14
  2. Réponses: 3
    Dernier message: 09/02/2007, 15h40
  3. Réponses: 4
    Dernier message: 05/12/2006, 20h13
  4. [Tableaux] Tableau HTML dynamique
    Par gunth dans le forum Fonctions
    Réponses: 2
    Dernier message: 14/12/2005, 16h59
  5. Tableaux Word ----> html
    Par luxmen dans le forum VBA Word
    Réponses: 9
    Dernier message: 01/12/2005, 22h27

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo