Drag and drop problème d'affichage [Résolu]

Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016
-
Bonjour,
Je teste la fonction drag and drop et je me trouve confronté à un problème d'affichage
En déplaçant un cercle celui ci se met bien dans la zone de réception, mais décale cette meme zone
De plus lorsque q'une zone de réception est déjà occupée, le cercle se met à l'extérieur des zones de réception
Merci pour votre aide

ci dessous le code
<!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:80px;
  height:80px;
  cursor:move;
  line-height:100px;
  text-align:center;
  opacity:0.7;
 }
 
 .div-drop
 {
  display:inline-block;
  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'ondragover='return false' ondrop='OnDropTarget(this, event);' >
     <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:red;' draggable='true' ondragstart='OnDragStart(this, event);'>4</div>
    </div>
    <br />

    <div id='plateau' style='width:250px; height:250px; border:solid 4px black;'>
     <div id='case1' class='div-drop' style='background-color:yellow;' ondragover='return false' ondrop='OnDropTarget(this, event);'></div>
     <div id='case2' class='div-drop' style='background-color:yellow;' ondragover='return false' ondrop='OnDropTarget(this, event);'></div>
     <div id='case3' class='div-drop' style='background-color:yellow;' ondragover='return false' ondrop='OnDropTarget(this, event);'></div>
     <div id='case4' class='div-drop' style='background-color:yellow;' ondragover='return false' ondrop='OnDropTarget(this, event);'></div>
    </div>
 </div>
  </body>
</html>

Cordialement


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

Merci d'y penser dans tes prochains messages.


Pierre Nonclercq
Afficher la suite 

1 réponse

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

1 **** Attention ****
Merci de bien vouloir utiliser la coloration syntaxique (les balises de code) lorsque tu postes du code sur le forum.
Explications disponibles ici :
http://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

.

2 - Par rapport au déplacement à l'exterieur de la zone, regardes comme ceci
 <div id='plateau' style='width:250px; min-height:250px; border:solid 4px black;'>



Pour ce qui est du décalage par contre... aucune idée pour l'instant

Cordialement, 
Jordane                                                                 
titan3131
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016
-
Bonjour
Merci pour votre réponse
Pourquoi la zone s'agrandie et comment empêcher de droper sur une zone déjà occupée
Cordialement
jordane45
Messages postés
26513
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 octobre 2019
316 > titan3131
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016
-
La zone s'agrandit par ce que j'ai modifié en min-height plutôt que d'imposer une taille fixe ...

Mais je n'avais pas compris que tu voulais empécher de mettre plusieurs objets dans une même zone...
Il te faut donc, avant de "relacher" l'objet, regarder si un objet existe dajà ou non dans la zone.

un truc du genre :
var element = document.getElementById('case1');
var contenu = element.innerHTML;
if(contenu.length>0){
 //il y a deja qq chose dedans
}else{
 //il n'y a rien dedans... je peux donc y placer l'objet
}


</code>
titan3131
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016
> jordane45
Messages postés
26513
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 octobre 2019
-
Bonjour
Je vais tester votre code conditionnel
Par contre avez vous une solution pour le décalage du premier drop, car le deuxième réajuste la position
Je ne vois pas ce qui fait faire ce décalage
Cordialement
Commenter la réponse de jordane45