Drag and drop problème de compréhension

Résolu
titan3131
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016
- Modifié par jordane45 le 5/01/2016 à 19:52
titan3131
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016
- 6 janv. 2016 à 13:39
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

3 réponses

jordane45
Messages postés
35793
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
4 juillet 2022
358
5 janv. 2016 à 19:54
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 :


0
titan3131
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016

Modifié par titan3131 le 5/01/2016 à 20:29
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
0
jordane45
Messages postés
35793
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
4 juillet 2022
358 > titan3131
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016

5 janv. 2016 à 20:24
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.
0
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

5 janv. 2016 à 20:40
Bonjour
et merci
Effectivement avec chrome cela fonctionne parfaitement
Mais comment font ceux qui n'ont que comme navigateur internet explorer?
Cordialement
0
@karamel
Messages postés
1807
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 mai 2022
144
Modifié par kazma le 5/01/2016 à 20:50
bonjour

quelle version de ie

rien ne sert de courir il faut partir a point.
cours Forest cours !
0
@karamel
Messages postés
1807
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 mai 2022
144
Modifié par kazma le 5/01/2016 à 21:49
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 !
0
titan3131
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016

6 janv. 2016 à 13:39
merci pour ta réponse, je testerai un peu plus tard
Cordialement
0