Drag and drop problème d'affichage

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 6/01/2016 à 14:24
titan3131 Messages postés 77 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

A voir également:

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

1 réponse

Réponse 1 / 1

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

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

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

titan3131 Messages postés 77 Date d'inscription vendredi 26 février 2010 Statut Membre Dernière intervention 8 juin 2016 > jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024
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

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

evenment clic + drag and drop sur une pictureBox

Partie entiére d'un nombre

Votre réponse

Discussions similaires