Drag and drop problème de compréhension [Résolu]

Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016
-
Bonjour,
Je suis en train d'apprendre le drag and drop en javascript, j'essaye de comprendre le fonctionnement;
Voici un code que j'ai adapté, le glissement se passe bien mais je ne comprend pas pourquoi il ne s'accroche pas à la zone de réception
Ci dessous le code
Dans l'attente de votre correction
 <!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Chifukoo</title>
    <link rel="stylesheet" href="style.css"/>
 <style type="text/css">
 .div-drag
 {
  display:inline-block;
  border-radius:50px;
  margin:10px;
  border:dotted 1px black;
  width:100px;
  height:100px;
  cursor:move;
  line-height:100px;
  text-align:center;
  opacity:0.7;
 }
 </style>
  </head>
  <body>
   <script type="text/javascript"> 
   //<![CDATA[ 
   function OnDragStart(target, evt){
    evt.dataTransfer.setData('IdElement', target.id);
   }
   function OnDropTarget(target, evt){
    var id = evt.dataTransfer.getData('IdElement');
    target.appendChild(document.getElementById(id));
    evt.preventDefault();
   }
   //]]> 
   </script>
 <div>
    <div style='border:solid 1px black; width:510px; height:120px'>
     <div id='divdrag1' class='div-drag' style='background-color:#76B4B5;' draggable='true' ondragstart='OnDragStart(this, event);'>1</div>
     <div id='divdrag2' class='div-drag' style='background-color:#56890E;' draggable='true' ondragstart='OnDragStart(this, event);'>2</div>
     <div id='divdrag3' class='div-drag' style='background-color:#7048B5;' draggable='true' ondragstart='OnDragStart(this, event);'>3</div>
     <div id='divdrag4' class='div-drag' style='background-color:#CCC610;' draggable='true' ondragstart='OnDragStart(this, event);'>4</div>
    </div>
    <br />
    <div style='display:table-cell; width:255px; height:250px; border:dashed 1px black;' ondragover='return false' ondrop='OnDropTarget(this, event);'>
    </div>
    <div style='display:table-cell; width:255px; height:250px; border:dashed 1px black;' ondragover='return false' ondrop='OnDropTarget(this, event);'>
    </div>
 </div>
  </body>
</html>





EDIT : Ajout des balises de code (la coloration syntaxique).
Explications disponibles ici :ICI

Merci d'y penser dans tes prochains messages.




Cordialement
Pierre Nonclercq
Afficher la suite 

3 réponses

Messages postés
26486
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 octobre 2019
316
0
Merci
Bonjour,

Je viens de tester ce code.... et il semble correctement fonctionner...

Qu'entends tu par
pourquoi il ne s'accroche pas à la zone de réception


Moi ça donne ça :


titan3131
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016
-
Bonjour
Quand je teste sur mon ordinateur le rond 4 ne reste pas dans la zone
Par contre j'ai ce message
Interner explorer a restreint l’exécution des scripts ou des contrôles active X sur cette page web
Si cela affecte le fonctionnement comment supprimer ce message uniquement sur mon travail
Ceci dit je ne pense pas que le problème vienne de ce message puisqu’en autorisant le script cela ne fonctionne pas
Cordialement
jordane45
Messages postés
26486
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 octobre 2019
316 > titan3131
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016
-
Ah ben voila ... tu as ta réponse !
A un moment tu as cliquer sur un bouton d'un avertissement de ton navigateur internet .... résultat... le script de cette page doit être désactivé...

Mais bon... de toutes façons ... internet explorer est à EVITER !!!
Essayes donc un vrai navigateur internet .... tel que FIREFOX ou GOOGLE CHROME.
titan3131
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016
> titan3131
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016
-
Bonjour
et merci
Effectivement avec chrome cela fonctionne parfaitement
Mais comment font ceux qui n'ont que comme navigateur internet explorer?
Cordialement
Commenter la réponse de jordane45
Messages postés
1716
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
22 septembre 2019
47
0
Merci
bonjour

quelle version de ie

rien ne sert de courir il faut partir a point.
cours Forest cours !
Commenter la réponse de @karamel
Messages postés
1716
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
22 septembre 2019
47
0
Merci
si c'est ie 8 7 6 il faut rajouter quelques lignes

en debut de fonction et ce pour les deux il faut detecter la methode utiliser pour l'evenement

evt =(!evt) ? window.event : evt;


ensuite renplace IdElement par Text

et la ligne avec

evt.preventDefault();


est a remplacé par

 !evt ? event.returnValue = false : evt.preventDefault();


j'ai pas ie 8 7 6 j'ai donc pas pu testé.

rien ne sert de courir il faut partir a point.
cours Forest cours !
titan3131
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016
-
merci pour ta réponse, je testerai un peu plus tard
Cordialement
Commenter la réponse de @karamel