Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Candidat au Club
    Homme Profil pro
    Enseignant
    Inscrit en
    mai 2019
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : mai 2019
    Messages : 2
    Points : 2
    Points
    2

    Par défaut Drag and drop avec échange d'éléments

    Bonjour,

    Je cherche une procédure pour échanger deux paragraphes (<p>) à l'intérieur de contenants <div>.
    Par exemple: lorsque je déplace P1(associée à une image) dans le div où est P2( associé à une image), je voudrais que P2 aille automatiquement dans le div où était P1.

    J'ai une page qui déplace ces paragraphes mais je ne sais pas comment faire un échange (un remplacement). Je vous la joins:

    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
    <!DOCTYPE html>
    <html lang="fr">
    	<head>
    		<title>Echange</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    		<script type="text/JavaScript" src="../../../JVS/Tutos/BoutonsDemo.js"></script> 
    		<style type="text/css">
                            #site{padding:20px;width:600px;margin:auto;}
                            .dropZones {
                                    float: left; 
                                    width: 100px; 
                                    height: 100px;
                                    margin: 15px;
                                    padding: 10px;
                                    border: 1px solid #aaaaaa;
                            }
                    </style>
     
    		<!-- FONCTIONS JAVA-->
    		<script type="text/JavaScript">
                    <!-- 
                            function dragStart(event) {
                                    event.dataTransfer.effectAllowed = "copy";
                                    event.dataTransfer.setData("type", event.target.tagName);
                                    event.dataTransfer.setData("id", event.target.id);
                                    document.getElementById("demo").innerHTML = "Début de glissement pour l'élément  "+event.target.tagName;
                            }
     
                            function dragEnd(event) {
                                    event.dataTransfer.dropEffect = "copyMove";
                                    event.dataTransfer.effectAllowed = "copy";
                            }
     
                            function dropZone(event) {
                                    event.preventDefault();
                            }
     
                            function drop(event) {
                                    event.preventDefault();
                                    var data = event.dataTransfer.getData("id");
                                    event.target.appendChild(document.getElementById(data));
                                    document.getElementById("demo").innerHTML = "Dépot de l'élément "+event.dataTransfer.getData("type");
                                    
                            }
                    //--> 
                    </script>
     
    	</head>
     
     
    	<body>
    		<div id="site">
    			<table>
    				<tr>
    					<td >
    						<div class="dropZones" ondrop="drop(event)" ondragover="dropZone(event)">
    							<p ondragstart="dragStart(event)" ondragend="dragEnd(event)" draggable="true" id="P_1">
    								P1
    								<img src="image.png" draggable="false">
    							</p>
    						</div>
    					</td>
    					<td>
    						<div class="dropZones" ondrop="drop(event)" ondragover="dropZone(event)">
    							<p ondragstart="dragStart(event)" ondragend="dragEnd(event)" draggable="true" id="P_2">
    								P2
    								<img src="image2.png" draggable="false">
    							</p>
    						</div>
    					</td>
    				</tr>
    				<tr>
    					<td colspan ="2" style="text-align:center" id="demo"></td>
    				</tr>
    			</table>
    		</div>
    	</body>
    </html>

    Merci d'avance pour vos idées.

  2. #2
    Membre chevronné
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    1 747
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 1 747
    Points : 2 165
    Points
    2 165

    Par défaut

    Salut,

    En modifiant la fonction drop par exemple comme ceci :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function drop(event) {
    				event.preventDefault();
                    var data = event.dataTransfer.getData("id");
                    var elm = document.getElementById(data) ;
                    var divOrigine = elm.parentElement;
                    var divDestination = event.target ; 
                    divOrigine.appendChild(divDestination.firstElementChild);
    				divDestination.appendChild(elm);
    				document.getElementById("demo").innerHTML = "Dépot de l'élément "+event.dataTransfer.getData("type");
     
    			}
    Tu peux tester ici : https://jsbin.com/woyililegu/edit?html,output

  3. #3
    Candidat au Club
    Homme Profil pro
    Enseignant
    Inscrit en
    mai 2019
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : mai 2019
    Messages : 2
    Points : 2
    Points
    2

    Par défaut Merci

    Ca marche au poil.
    juste un problème quand on drop à l'intérieur du <p>, ça scinde le texte de son image. Mais je vois comment résoudre ce problème.
    Merci pour la célérité de la réponse.

  4. #4
    Membre chevronné
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    1 747
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 1 747
    Points : 2 165
    Points
    2 165

    Par défaut

    Oui c'est possible je n'ai pas remarqué car j'ai testé sans images en fait...

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 534
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 534
    Points : 33 068
    Points
    33 068

    Par défaut Quelques remarques !

    Bonjour,
    tu gagnerais à utiliser la méthode addEventListener pour « accrocher » un événement à tes éléments draggable="true" et cela pour au moins deux raisons.
    • Séparation des couches, pas de JavaScript dans le HTML ;
    • Obtention du bon élément « dragger » dans les fonctions via le mot clé this, contrairement à event.target qui peut t'obliger à faire une gymnastique.


    Le code HTML devient limpide et évolutif sans soucis, ton exemple donnerait
    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
    <table>
      <tr>
        <td>
          <div class="dropZones">
            <p draggable="true" id="P_1">P1
              <img src="image.png">
            </p>
          </div>
        </td>
        <td>
          <div class="dropZones">
            <p draggable="true" id="P_2">P2
              <img src="image2.png">
            </p>
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="2" style="text-align:center" id="demo"></td>
      </tr>
    </table>
    au passage, l'utilisation d'une <table> dans ton cas ne se justifie pas mais bon ...

    L'affectation des événement est elle aussi des plus simple
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const elemsDrop = document.querySelectorAll(".dropZones");
    elemsDrop.forEach( function(elem){
      elem.addEventListener( "drop", drop);
      elem.addEventListener( "dragover", dropZone);
    });
    const elemsDrag = document.querySelectorAll("[draggable=true]");
    elemsDrag.forEach( function(elem){
      elem.addEventListener( "dragstart", dragStart);
      elem.addEventListener( "dragend", dragEnd);
    });
    tu n'auras rien à modifier si tu fais évoluer ton code HTML.

    L'avantage est que maintenant tu récupères via le this directement l'élément souhaité, par exemple
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    function dragStart(event) {
      const elemDrag = this;
      event.dataTransfer.effectAllowed = "copy";
      event.dataTransfer.setData("type", elemDrag.tagName);     // attention compatibilté IE11 si besoin
      event.dataTransfer.setData("id", elemDrag.id);
      document.getElementById("demo").innerHTML = "Début de glissement pour l'élément  " + event.target.tagName;
    }
    tu pourras noter que event.target pourra être différent suivant l'endroit où tu auras cliqué mais que le this (elemDrag) sera toujours le même ce qui simplifie la fonction sur le « drop ».

    Exemple :
    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
    function drop(event) {
      event.preventDefault();
      // récup. des différents éléments
      const id = event.dataTransfer.getData("id");
      const elemDrop = document.getElementById(id);
      const oSource = elemDrop.parentNode;
      const oDestination = this;
      // ATTENTION : on ne fait rien si l'on repose l'élément au même endroit
      if (oDestination !== oSource) {
        // get all Elements et les déplaces
        while (oDestination.firstChild) {
          oSource.appendChild(oDestination.firstChild);
        }
        // déplace l'élément droppé
        oDestination.appendChild(elemDrop);
      }
      document.getElementById("demo").innerHTML = "Dépot de l'élément ";
    }
    J'ai ajouté quelques corrections mais d'autres méthodes pourraient également convenir, je pense notamment à replaceChild.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Faire un drag and drop avec échange de position
    Par spiritness dans le forum jQuery
    Réponses: 0
    Dernier message: 25/03/2014, 12h04
  2. drag and drop avec plusieurs éléments
    Par yohan0262 dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 17/09/2008, 12h57
  3. Réponses: 6
    Dernier message: 18/12/2007, 09h16
  4. [AJAX] Drag and Drop avec AJAX
    Par bonano dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 20/03/2007, 22h44
  5. "Drag and drop" avec directinput
    Par batosai dans le forum DirectX
    Réponses: 1
    Dernier message: 16/06/2004, 16h48

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