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

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

Votre réponse

1 réponse

Messages postés
23317
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 novembre 2018
Modifié par jordane45 le 6/01/2016 à 14:35
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                                                                 
Messages postés
78
Date d'inscription
vendredi 26 février 2010
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
Messages postés
23317
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 novembre 2018
>
Messages postés
78
Date d'inscription
vendredi 26 février 2010
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>
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Dernière intervention
8 juin 2016
>
Messages postés
23317
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 novembre 2018
- 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.