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

titan3131 78 Messages postés vendredi 26 février 2010Date d'inscription 8 juin 2016 Dernière intervention - 5 janv. 2016 à 17:09 - Dernière réponse : titan3131 78 Messages postés vendredi 26 février 2010Date d'inscription 8 juin 2016 Dernière intervention
- 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
Afficher la suite 

Votre réponse

7 réponses

jordane45 21108 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 22 mai 2018 Dernière intervention - 5 janv. 2016 à 19:54
0
Utile
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 78 Messages postés vendredi 26 février 2010Date d'inscription 8 juin 2016 Dernière intervention - 5 janv. 2016 à 20:17
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 21108 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 22 mai 2018 Dernière intervention > titan3131 78 Messages postés vendredi 26 février 2010Date d'inscription 8 juin 2016 Dernière intervention - 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.
titan3131 78 Messages postés vendredi 26 février 2010Date d'inscription 8 juin 2016 Dernière intervention > titan3131 78 Messages postés vendredi 26 février 2010Date d'inscription 8 juin 2016 Dernière intervention - 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
Commenter la réponse de jordane45
@karamel 1655 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 19 avril 2018 Dernière intervention - Modifié par kazma le 5/01/2016 à 20:50
0
Utile
bonjour

quelle version de ie

rien ne sert de courir il faut partir a point.
cours Forest cours !
Commenter la réponse de @karamel
@karamel 1655 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 19 avril 2018 Dernière intervention - Modifié par kazma le 5/01/2016 à 21:49
0
Utile
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 78 Messages postés vendredi 26 février 2010Date d'inscription 8 juin 2016 Dernière intervention - 6 janv. 2016 à 13:39
merci pour ta réponse, je testerai un peu plus tard
Cordialement
Commenter la réponse de @karamel

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.