Drag and drop problème de compréhension

Résolu

titan3131 Messages postés 77 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 77 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

A voir également:

Javascript drag and drop
Récupérer données json (javascript) - Conseils pratiques -Javascript
Javascript poo - Conseils pratiques -Javascript
Drag and drop javascript - Forum Javascript / DHTML
Drop table if exists - Forum SQL
Base de données javascript - Conseils pratiques -Javascript

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 344
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 :

titan3131 Messages postés 77 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

jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 344 > titan3131 Messages postés 77 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.

titan3131 Messages postés 77 Date d'inscription vendredi 26 février 2010 Statut Membre Dernière intervention 8 juin 2016 > titan3131 Messages postés 77 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

Réponse 2 / 3

@karamel Messages postés 1854 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 8 avril 2024 153
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 !

Réponse 3 / 3

@karamel Messages postés 1854 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 8 avril 2024 153
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 !

titan3131 Messages postés 77 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

Discussions similaires

Drag and drop dans un tableau HTML

Drag Drop de fichiers

drag and drop d'une image d'une page web lancée depuis un webbroswer

Partie entiére d'un nombre

evenment clic + drag and drop sur une pictureBox

Votre réponse

Discussions similaires