Drag and drop problème d'affichage

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 6/01/2016 à 14:24
titan3131
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Statut
Membre
Dernière intervention
8 juin 2016
- 14 janv. 2016 à 18:07
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

1 réponse

jordane45
Messages postés
35795
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
4 juillet 2022
358
Modifié par jordane45 le 6/01/2016 à 14:35
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                                                                 
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 à 14:48
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
0
jordane45
Messages postés
35795
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

6 janv. 2016 à 15:07
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>
0
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
35795
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
4 juillet 2022

14 janv. 2016 à 18:07
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
0