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

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

4 réponses

Répondre au sujet
jordane45 19268 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 16 décembre 2017 Dernière intervention - Modifié par jordane45 le 6/01/2016 à 14:35
0
Utile
3
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 78 Messages postés vendredi 26 février 2010Date d'inscription 8 juin 2016 Dernière intervention - 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
jordane45 19268 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 16 décembre 2017 Dernière intervention > titan3131 78 Messages postés vendredi 26 février 2010Date d'inscription 8 juin 2016 Dernière intervention - 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>
titan3131 78 Messages postés vendredi 26 février 2010Date d'inscription 8 juin 2016 Dernière intervention > jordane45 19268 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 16 décembre 2017 Dernière intervention - 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
Commenter la réponse de jordane45

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.