1. #1
    Nouveau membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    octobre 2016
    Messages
    52
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : octobre 2016
    Messages : 52
    Points : 29
    Points
    29

    Par défaut Drag and Drop dans une boucle

    Bonjour,

    j'ai un souci avec mon javascript, je veut afficher des div ou l'on peut glisser/déposer des images c'est div sont en faite des catégorie donc voici la page php qui affiche les div (catégorie) en boucle :
    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
    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
    <html>
    <head>
     
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta charset="UTF-8">
     
    </head>
     
     
    <body>
     
    	<?php
            include'bdd.php';
            
            $req = $dbh->query('SELECT * FROM catégorie');
            
            while($result = $req->fetch()){
                    
            $categorie = $result['titre'];
            $photo = $result['photo'];
            $chemin = "categorie/$categorie/$photo";
            
            echo "<div class='container'>
            
        <div class='contr'>
            <cite>Glissez – déposez vos fichiers dans la « zone de drop » (maximum cinq fichiers – taille maximale par fichier 256 kb)</cite>
        </div>
        
        <div class='upload_form_cont'>
            <div class='dropArea' id='dropArea' style='background-image: url($chemin); background-size: cover;'>Zone de drop</div>
            
            <div class='info'>
                <div>Fichiers restants : <span id='count'>0</span></div>
                <input id='url' type='hidden' value='./upload.php'/>
                <input id='categorie' type='hidden' value='$categorie'/>
            </div>
                
                <h2>Résultat :</h2>
                
                <div id='result'></div>
                
                <canvas width='500' height='20'></canvas>
            </div>
        </div>
    </div>";
                    
            }
                    
            ?>
     
     
     
     
    <script src="animmsg.js"></script>
     
     
     
    </body>
     
     
    </html>

    et voici la page javascript qui traite :
    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
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    // variables
    var dropArea = document.getElementById('dropArea');
    var canvas = document.querySelector('canvas');
    var context = canvas.getContext('2d');
    var count = document.getElementById('count');
    var destinationUrl = document.getElementById('url');
    var categorie = encodeURIComponent(document.getElementById("categorie").value);
    var result = document.getElementById('result');
    var list = [];
    var totalSize = 0;
    var totalProgress = 0;
     
     
    var divs = document.getElementsByClassName('container'), i;
     
    for (i = 0; i < divs.length; ++i) {
     
    // initialisation
    (function(){
     
        // gestionnaires
        function initHandlers() {
            dropArea.addEventListener('drop', handleDrop, false);
            dropArea.addEventListener('dragover', handleDragOver, false);
        }
     
        // affichage de la progression
        function drawProgress(progress) {
            context.clearRect(0, 0, canvas.width, canvas.height); // effacer le canvas
     
            context.beginPath();
            context.strokeStyle = '#4B9500';
            context.fillStyle = '#4B9500';
            context.fillRect(0, 0, progress * 500, 20);
            context.closePath();
     
            // affichage de la progression (mode texte)
            context.font = '16px Verdana';
            context.fillStyle = '#000';
            context.fillText('Progression : ' + Math.floor(progress*100) + ' %', 50, 15);
        }
     
        // survol lors du déplacement
        function handleDragOver(event) {
            event.stopPropagation();
            event.preventDefault();
     
            dropArea.className = 'hover';
        }
     
        // glisser déposer
        function handleDrop(event) {
            event.stopPropagation();
            event.preventDefault();
     
            processFiles(event.dataTransfer.files);
        }
     
        // traitement du lot de fichiers
        function processFiles(filelist) {
            if (!filelist || !filelist.length || list.length) return;
     
            totalSize = 0;
            totalProgress = 0;
            result.textContent = '';
     
            for (var i = 0; i < filelist.length && i < 5; i++) {
                list.push(filelist[i]);
                totalSize += filelist[i].size;
            }
            uploadNext();
        }
     
        // à la fin, traiter le fichier suivant
        function handleComplete(size) {
            totalProgress += size;
            drawProgress(totalProgress / totalSize);
            uploadNext();
        }
     
        // mise à jour de la progression
        function handleProgress(event) {
            var progress = totalProgress + event.loaded;
            drawProgress(progress / totalSize);
        }
     
        // transfert du fichier image
        function uploadFile(file, status) {
     
            // création de l'objet XMLHttpRequest
            var xhr = new XMLHttpRequest();
            xhr.open('POST', destinationUrl.value);
            xhr.onload = function() {
                result.innerHTML += this.responseText;
                handleComplete(file.size);
            };
            xhr.onerror = function() {
                result.textContent = this.responseText;
                handleComplete(file.size);
            };
            xhr.upload.onprogress = function(event) {
                handleProgress(event);
            }
            xhr.upload.onloadstart = function(event) {
            }
     
            // création de l'objet FormData
            var formData = new FormData();
            formData.append('myfile', file);
            formData.append('categorie', categorie);
     
            xhr.send(formData);
     
        }
     
     
        // transfert du fichier suivant
        function uploadNext() {
            if (list.length) {
                count.textContent = list.length - 1;
                dropArea.className = 'uploading';
     
                var nextFile = list.shift();
                if (nextFile.size >= 262144) { // 256 kb
                    result.innerHTML += '<div class="f">Fichier trop gros (dépassement de la taille maximale)</div>';
                    handleComplete(nextFile.size);
                } else {
                    uploadFile(nextFile, status);
                }
            } else {
                dropArea.className = '';
            }
        }
     
        initHandlers();
    })();
     
    }
    tout marche parfaitement sur la première div et je sais que un id doit être unique dans la page c'est pourquoi j'ai mit :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    var divs = document.getElementsByClassName('container'), i;
     
    for (i = 0; i < divs.length; ++i) {
    je pensais que le traitement recommencerais a chaque fois qu'il rencontre la classe container mais apparemment sa ne marche pas

    CDT

  2. #2
    Expert éminent
    Avatar de sekaijin
    Homme Profil pro
    Urbaniste
    Inscrit en
    juillet 2004
    Messages
    3 983
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Urbaniste
    Secteur : Santé

    Informations forums :
    Inscription : juillet 2004
    Messages : 3 983
    Points : 8 326
    Points
    8 326

    Par défaut

    le Drag et Drop sont des événements produit par l'utilisateur il ne peuvent pas être dans une boucle.

    ce qui est dans la boucle c'est le code HTML source produit par le PHP côté serveur alors que le D&D sont des objet crée par le navigateur dans la mémoire du navigateur accessible via javascript.

    Alors avant de poser une question sur javascript il serait bon de se relire et de suivre les préconisations du forum
    à savoir
    NE PAS POSTER DE PHP ASP JSP ... mais le HTML que produit le serveur.

    Si pour la miliardième fois cela avait été fait (il suffit de faire afficher la source dans le navigateur)
    Une simple lecture t'aurais montré que ton code HTML est foireux il n'est pas conforme.
    Tu peux donc tenter de mettre tout le javascript que tu veux tu travaille sur un code faux. le navigateur va l'interprété de son mieux mais JAMAIS il de produire un DOM qui corresponds à 100% à ton HTML

    et javascript ne travaille pas sur ton code HTML il travail sur le DOM que le navigateur à Produit.

    si on résume tu as un PHP qui produit un text HTML foireux
    le navigateur interprète ce HTML pour en faire un DOM
    Ce DOM ne peux pas être conforme à ton HTML (foireux) et il encore plus loin du PHP que tu as posté.

    Le javascript tente d'agir sur un DOM que tu imagine avoir crée et ne trouve pas ses petits.

    Pour la milliardième fois les règles du forum sont là pour vous aider. suivez-les et ça ira beaucoup mieux.

    Je n'ai pas lu la totale car dès le premier coup d'oeil est est évident que le code php n'est pas bon pour produire un HTML conforme.
    une petite lecture de https://www.w3schools.com/tags/att_global_id.asp nous dit que id DOIT être UNIQUE
    une lecture du code
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    while($result = $req->fetch()){
    echo "....<div class='dropArea' id='dropArea'";

    Donc si il y a 100 enregistrements 100 dic auront le même id.
    il est inutile d'analyser le code plus loin ça suffit à tout planter.

    A+JYT

  3. #3
    Nouveau membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    octobre 2016
    Messages
    52
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : octobre 2016
    Messages : 52
    Points : 29
    Points
    29

    Par défaut

    Bonjour,

    effectivement j'avais bien remarquer que cela ne marchait pas et qu'il enregistrait plusieurs fois la même image mais c’était pour donner un exemple, comment je suis censé afficher mon code HTML alors ?? j'ai bien spécifier pourtant "je sais que un id doit être unique dans la page" même si j’enlève l'ID pour mettre une class sa ne change pas

  4. #4
    Expert éminent
    Avatar de sekaijin
    Homme Profil pro
    Urbaniste
    Inscrit en
    juillet 2004
    Messages
    3 983
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Urbaniste
    Secteur : Santé

    Informations forums :
    Inscription : juillet 2004
    Messages : 3 983
    Points : 8 326
    Points
    8 326

    Par défaut

    il faut mettre un id unique

  5. #5
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 639
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 639
    Points : 20 910
    Points
    20 910
    Billets dans le blog
    38

    Par défaut



    Il y a une foule d'ID dupliqué et l'organisation de votre code est bizarre.

    On peut travailler en utilisant des classes, exemple :

    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
    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
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    <!DOCTYPE html>
    <html lang="fr" dir="ltr">
    <head>
    	<!-- cache-control avec max-age=60 pour le développement uniquement -->
      <meta http-equiv="cache-control" content="public, max-age=60">
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
      <meta name="author" content="Daniel Hagnoul">
      <title>test</title>
      <style>
        * {
          box-sizing: border-box;
        }           
                    
                    /* CSS du test */
                    
                    
                    /* Fin CSS du test */
     
      </style>
      <script>
        'use strict';
                    
        document.addEventListener( "DOMContentLoaded", ev => {
                            
          // code du test
                            
                            
                            // fin code du test
          
        }, false );
        
        window.addEventListener( "load", ev => { 
                            
          // code du test
                            
                            const
                                    containers = document.querySelectorAll( ".container");
                             
                            for ( const [ i, container ] of Array.from( containers ).entries() ) {
                                    const
                                            dropAera = container.querySelector( ".dropAera" ),
                                            canvas = container.querySelector( "canvas" ),
                                            count = container.querySelector( "count" ),
                                            destinationUrl = container.querySelector( ".url" ),
                                            categorie = encodeURIComponent( container.querySelector( ".categorie" ).value ),
                                            result = container.querySelector( ".result" ),
                                            ctx = canvas.getContext( "2d" );
                                            
                                    // début debug
                                    
                                    console.log( i );
                                    result.textContent = i;
                                    
                                    switch( i ){
                                            case 0 :
                                                    ctx.fillStyle = "green";
                                                    ctx.fillRect( 10, 10, 100, 100 );
                                                    break;
                                            case 1 :
                                                    ctx.fillStyle = "red";
                                                    ctx.fillRect( 10, 10, 100, 100 );
                                                    break;
                                            case 2 :
                                                    ctx.fillStyle = "yellow";
                                                    ctx.fillRect( 10, 10, 100, 100 );
                                                    break;
                                            default :
                                                    ctx.fillStyle = "grey";
                                                    ctx.fillRect( 10, 10, 100, 100 );
                                    }
                                    
                                    // fin debug
                            }
                            
                            // fin code du test
        }, false );
      </script>
    </head>
    <body>
     
    	<div class='container'>
    			<div class='contr'>
    					<cite>Glissez ? déposez vos fichiers dans la « zone de drop » (maximum cinq fichiers ? taille maximale par fichier 256 kb)</cite>
    			</div>
    			<div class='upload_form_cont'>
    					<div class='dropArea'>Zone de drop</div>
    					<div class='info'>
    							<div>Fichiers restants : <span class="count">0</span></div>
    							<input class="url" type='hidden' value='./upload.php'/>
    							<input class="categorie" type='hidden' value=''/>
    					</div>
    						<h2>Résultat :</h2>
    						<div class="result"></div>
    						<canvas width='500' height='20'></canvas>
    					</div>
    			</div>
    	</div>	
    	<div class='container'>
    			<div class='contr'>
    					<cite>Glissez ? déposez vos fichiers dans la « zone de drop » (maximum cinq fichiers ? taille maximale par fichier 256 kb)</cite>
    			</div>
    			<div class='upload_form_cont'>
    					<div class='dropArea'>Zone de drop</div>
    					<div class='info'>
    							<div>Fichiers restants : <span class="count">0</span></div>
    							<input class="url" type='hidden' value='./upload.php'/>
    							<input class="categorie" type='hidden' value=''/>
    					</div>
    						<h2>Résultat :</h2>
    						<div class="result"></div>
    						<canvas width='500' height='20'></canvas>
    					</div>
    			</div>
    	</div>	
    	<div class='container'>
    			<div class='contr'>
    					<cite>Glissez ? déposez vos fichiers dans la « zone de drop » (maximum cinq fichiers ? taille maximale par fichier 256 kb)</cite>
    			</div>
    			<div class='upload_form_cont'>
    					<div class='dropArea'>Zone de drop</div>
    					<div class='info'>
    							<div>Fichiers restants : <span class="count">0</span></div>
    							<input class="url" type='hidden' value='./upload.php'/>
    							<input class="categorie" type='hidden' value=''/>
    					</div>
    						<h2>Résultat :</h2>
    						<div class="result"></div>
    						<canvas width='500' height='20'></canvas>
    					</div>
    			</div>
    	</div>	
     
    </body>
    </html>

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Si un message vous a aidé ou vous semble pertinent, votez pour lui !

  6. #6
    Nouveau membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    octobre 2016
    Messages
    52
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : octobre 2016
    Messages : 52
    Points : 29
    Points
    29

    Par défaut

    Au-tant pour moi j'ai réussi maintenant j'ai un problème similaire lors du traitement, comment transmettre la catégorie donc le :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <input name='categorie' type='hidden' value='$categorie'/>
    sélectionner car je récupère un tableau mais comment savoir celui qui a été sélectionner ?
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var categorie = encodeURIComponent(document.getElementsByName("categorie").value);
    doit-je faire une boucle comme ceci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     for(i=0; i < categorie.length; i++){
       categorie = categorie[i];
            }
    ?

  7. #7
    Nouveau membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    octobre 2016
    Messages
    52
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : octobre 2016
    Messages : 52
    Points : 29
    Points
    29

    Par défaut

    si quelqu'un a une solution car je suis toujours bloquer, comment savoir sur quelle div nous avons déposer la photo ?

Discussions similaires

  1. Drag And Drop dans une Grid
    Par amandinerenard dans le forum Windows Presentation Foundation
    Réponses: 4
    Dernier message: 13/05/2013, 17h41
  2. Drag and drop dans une seul listview
    Par jacko842 dans le forum VB.NET
    Réponses: 0
    Dernier message: 21/04/2010, 13h42
  3. [script.aculo.us] Drag and drop dans une div avec un scroll horizontal
    Par ridan dans le forum Bibliothèques & Frameworks
    Réponses: 7
    Dernier message: 21/07/2009, 19h14
  4. [VB.net] Drag and drop dans une Treeview
    Par gégécap dans le forum Windows Forms
    Réponses: 2
    Dernier message: 19/10/2006, 10h05
  5. [VB.NET]Drag and Drop dans une Listview
    Par gégécap dans le forum Windows Forms
    Réponses: 5
    Dernier message: 23/08/2006, 18h41

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