Drag & Drop Bug de mise à la poubelle

**BROADSIDER** · 02/02/2019, 22h08

Bonjour,
Je travail depuis de nombreuse heures sur un site me permettant de calculer des images stocké dans un inventaire et que l'ont déplace via drag & drop, mais je sèche je n'arrive pas a trouver comment les enlever une fois qu'elles sont déplacer sans pour autant supprimer l'image de l'inventaire... Je vous met le code ci-dessous je pense que le probème viens du fait qu'il faudrais créer une class a l'image déplacer pour ne pas reemploycer le ".product" mais je ne suis pas un professionel du java, j'espere que quelqu'un pourra me venir en aide.
Voici le code java pemettant de déplacer l'image du conteneur 1 ou conteneur 2 puis du 2 au 3, (le probleme est entre le 2-3; le 3 étant la poubelle, et le 2 celui calculant).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<script>
var cartArea = document.querySelector('#cartArea');
var poubelle = document.querySelector('#poubelle');  
 
var prods = document.querySelectorAll('.product');
var prods2 = document.querySelectorAll('.product');
for(var i = 0; i < prods.length; i++)
{
	prods[i].addEventListener('dragstart', function(evnt) {
		this.className = 'itemchoosen';
		evnt.dataTransfer.effectAllowed = 'copy';
		evnt.dataTransfer.setData('text', this.id);
		return false;  
	}, false); 
    prods2[i].addEventListener('dragstart', function(evnt2) {
		this.className = 'itemchoosen';
		evnt2.dataTransfer.effectAllowed = 'copy';
		evnt2.dataTransfer.setData('text', this.id);
		return false;  
	}, false);
}	
 
 
cartArea.addEventListener('dragover', function(evnt) {
		if (evnt.preventDefault) evnt.preventDefault();
		evnt.dataTransfer.dropEffect = 'copy';
		return false;	
}, false);
 
cartArea.addEventListener('dragenter', function(evnt) {
		return false;	
}, false);
 
cartArea.addEventListener('dragleave', function(evnt) {
		return false;
}, false);  
 
poubelle.addEventListener('dragover', function(evnt2) {
		if (evnt2.preventDefault) evnt2.preventDefault();
		evnt2.dataTransfer.dropEffect = 'copy';
		return false;	
}, false);
 
poubelle.addEventListener('dragenter', function(evnt2) {
		return false;	
}, false);
 
poubelle.addEventListener('dragleave', function(evnt2) {
		return false;
}, false);
 
cartArea.addEventListener('drop', function(evnt) {
	if (evnt.stopPropagation) evnt.stopPropagation();
	var id = evnt.dataTransfer.getData('text');		
	var theitem = document.getElementById(id);		
	theitem.className='itemblurred';
	var y  = theitem.cloneNode( true);
	cartArea.appendChild(y);
	evnt.preventDefault();
	return false;
}, false);
 
poubelle.addEventListener('drop', function(evnt2) {
	if (evnt2.stopPropagation) evnt2.stopPropagation();
	var id2 = evnt2.dataTransfer.getData('text');		
	var theitem2 = document.getElementById(id2);	
    theitem2.parentNode.removeChild(el);	
	theitem2.className='itemblurred';
	var y2  = document.createElement('img');
	y2.src = theitem2.src;
	poubelle.appendChild(y);
	evnt2.preventDefault();
	return false;
}, false);
 
</script>

Et voici les images que je fais apparaitre dans le conteneur 1 via php avec leurs id....Ainsi que les 3 conteneur (inventaire, calculateur et poubelle)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    <div class="background" id="boxA">
        <p class=floatleft> <img data-value2=25 data-value=39 class=product id=Cadre_Fireblade src =/theo.briollet/projet07_projetbac/images/Cadre_Fireblade.jpg height=140width=140> <br/>Cadre_Fireblade</br>39pts-25€ <br/> <p class=floatleft> <img data-value2=60 data-value=72 class=product id=Commander_Crisis src =/theo.briollet/projet07_projetbac/images/Commander_Crisis.jpg height=140width=140> <br/>Commander_Crisis</br>72pts-60€ <br/> <p class=floatleft> <img data-value2=40 data-value=76 class=product id=Enforcer_Battlesuit src =/theo.briollet/projet07_projetbac/images/Enforcer_Battlesuit.jpg height=140width=140> <br/>Enforcer_Battlesuit</br>76pts-40€ <br/> <p class=floatleft> <img data-value2=13 data-value=45 class=product id=Ethereal src =/theo.briollet/projet07_projetbac/images/Ethereal.jpg height=140width=140> <br/>Ethereal</br>45pts-13€ <br/> <p class=floatleft> <img data-value2=13 data-value=50 class=product id=Ethereal_Drone src =/theo.briollet/projet07_projetbac/images/Ethereal_Drone.jpg height=140width=140> <br/>Ethereal_Drone</br>50pts-13€ <br/> <p class=floatleft> <img data-value2=13 data-value=137 class=product id=Longstrike src =/theo.briollet/projet07_projetbac/images/Longstrike.jpg height=140width=140> <br/>Longstrike</br>137pts-13€ <br/> <p class=floatleft> <img data-value2=40 data-value=70 class=product id=Breacher_Team src =/theo.briollet/projet07_projetbac/images/Breacher_Team.jpg height=140width=140> <br/>Breacher_Team</br>70pts-40€ <br/> <p class=floatleft> <img data-value2=30 data-value=80 class=product id=Kroot_Carnivores src =/theo.briollet/projet07_projetbac/images/Kroot_Carnivores.jpg height=140width=140> <br/>Kroot_Carnivores</br>80pts-30€ <br/> <p class=floatleft> <img data-value2=40 data-value=70 class=product id=Strike_Team src =/theo.briollet/projet07_projetbac/images/Strike_Team.jpg height=140width=140> <br/>Strike_Team</br>70pts-40€ <br/> <p class=floatleft> <img data-value2=30 data-value=80 class=product id=TY7_Devilfish src =/theo.briollet/projet07_projetbac/images/TY7_Devilfish.jpg height=140width=140> <br/>TY7_Devilfish</br>80pts-30€ <br/> <p class=floatleft> <img data-value2=60 data-value=126 class=product id=Crisis_Battlesuit src =/theo.briollet/projet07_projetbac/images/Crisis_Battlesuit.jpg height=140width=140> <br/>Crisis_Battlesuit</br>126pts-60€ <br/> <p class=floatleft> <img data-value2=60 data-value=135 class=product id=Crisis_Bodyguards src =/theo.briollet/projet07_projetbac/images/Crisis_Bodyguards.jpg height=140width=140> <br/>Crisis_Bodyguards</br>135pts-60€ <br/> <p class=floatleft> <img data-value2=34 data-value=21 class=product id=Marksman src =/theo.briollet/projet07_projetbac/images/Marksman.jpg height=140width=140> <br/>Marksman</br>21pts-34€ <br/> <p class=floatleft> <img data-value2=60 data-value=82 class=product id=XV95_Ghostkeel src =/theo.briollet/projet07_projetbac/images/XV95_Ghostkeel.jpg height=140width=140> <br/>XV95_Ghostkeel</br>82pts-60€ <br/> <p class=floatleft> <img data-value2=21 data-value=34 class=product id=Krootox_Riders src =/theo.briollet/projet07_projetbac/images/Krootox_Riders.jpg height=140width=140> <br/>Krootox_Riders</br>34pts-21€ <br/> <p class=floatleft> <img data-value2=11 data-value=31 class=product id=Kroot_Shaper src =/theo.briollet/projet07_projetbac/images/Kroot_Shaper.jpg height=140width=140> <br/>Kroot_Shaper</br>31pts-11€ <br/> <p class=floatleft> <img data-value2=65 data-value=185 class=product id=XV104_Riptide src =/theo.briollet/projet07_projetbac/images/XV104_Riptide.jpg height=140width=140> <br/>XV104_Riptide</br>185pts-65€ <br/> <p class=floatleft> <img data-value2=21 data-value=60 class=product id=XV25_Stealth src =/theo.briollet/projet07_projetbac/images/XV25_Stealth.jpg height=140width=140> <br/>XV25_Stealth</br>60pts-21€ <br/>  
    </div>
 
<section class="background2" id="cartArea"> 
 
</section>
 
<div class="resultat">                       
    <header> 
        <h2> TOTAL: 0pts 0€</h2> 
    </header>
</div> 
 
<div class="poubelle" id="poubelle">
 
</div>

**NoSmoking** · 04/02/2019, 09h49

Bonjour,
tout d'abord

Rappel

Les questions d'ordre technique doivent être posées exclusivement sur le forum.
Demander une réponse ou un contact via message privé (MP), est contraire aux buts de nos forums qui sont de permettre l'entraide mais aussi le partage des informations.

Règles : IV-K. De l'usage des MP (messages privés)

Je ne répondrais pas directement à tes interrogations mais je te mets un lien vers une discussion qui devrait t'intéresser : Drag and drop méthode setData pour dataTransfert.

Un exemple de réalisation est même fourni : https://www.developpez.net/forums/d1.../#post10349325.

**BROADSIDER** · 05/02/2019, 13h18

Merci nosmocking ton lien m'a beaucoup aidé, mais il me reste un souci, je m'explique j'arrive a faire le drag and drop de ma div 1 vers la 2 (sens unique) apres de la 2 vers la 3 qui me sert a detruire l'image de la div 2 mais malheureusement je n'arrive pas a empecher l'utilisateur de drag dans la div 1 et drop dans la 3 car cela detruit l'image de la div 1 or je ne veux pas et je ke sais ps comme't faire 😒

**NoSmoking** · 05/02/2019, 13h29

Dans ta fonction « drop » de la poubelle, il te suffit de regarder l'origine de l'élément, avec element.parentNode, et si ce n'est pas l'élément id="cartArea" tu ne fais rien.

**BROADSIDER** · 05/02/2019, 17h16

Merci beaucoup pour ton aide je test ca ! Juste une derniere question est il possible ou non qu'une fois que l'image est droppé dans ma div de sélection que je modifie son apparence car j'aimerais que l'image devienne plus petite et qu'il y'est son nom qui s'affiche a coté, si oui comment ? Y'a t'il une fonction permettant de créer un class à chaque clone en y'ajoutant une variable qui afficherais le nom de l'unité en fonction du champ inscrit dans la base de donnée?

**BROADSIDER** · 05/02/2019, 22h06

je n'arrive pas à mettre en place ce que tu m'a dis car je n'arrive pas a se faire chevauché les conditions:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
function handleDrop(e) {
  if (e.stopPropagation) {
    e.stopPropagation();
    e.preventDefault();
  }
  var oDest = this; 
  var elem = document.getElementById(e.dataTransfer.getData(typeData)); 
  elem.id = "";  
 
 
  if (elem.parentNode !== oDest) {
    var retour = oDest.classList.contains("liste-origine");
    if (retour) {
      elem.parentNode.removeChild(elem);
    } 
    else {                            
      var existe = existeDeja(oDest, elem.dataset.num);
 
 
        var clone = elem.cloneNode(true);
        clone.addEventListener("dragstart", handleDragStart, false);
        oDest.appendChild(clone); 
    }
  }
  oDest.classList.remove("drag-over");
  showGroupes();
  return false;
}

J'ai repris le code sur le site que tu m'avais conseiller d'aller voir, donc avec ca j'arrive à drager l'image de la div 1 vers la 2 (déplacement a sens unique qui fait apparaitre l'image), car la div 2 ne fait pas partit de la class"liste-origine", puis j'arrive à supprimer l'image en prenant l'image de la div 2 vers la poubelle car la poubelle à la class"liste-origine", mais si l'utilisateur prend une image de la div 1 et la pose dans la 3 sa me la supprime et j'ai beau essayé de réadapter ton code je n'arrive pas à empécher cela....

**NoSmoking** · 06/02/2019, 15h54

Si div1 est Liste-Origine, div2 est Selection et div3 est Poubelle alors on commence par regarder les dépendances avec des « vrais noms ».

Sont autorisés les déplacements suivants :

Déplacement de Liste-Origine vers Sélection autorisé ;
Déplacement de Sélection vers Poubelle autorisé.

TOUS les autres sont non autorisés :

Déplacement de Liste-Origine vers Poubelle non autorisé ;
Déplacement de Sélection vers Liste-Origine non autorisé ;
Déplacement de Poubelle vers Liste-Origine non autorisé ;
Déplacement de Poubelle vers Sélection non autorisé.

De plus on considère que les déplacements dans le même conteneur ne sont pas autorisés.

On sait également que

Déplacement de Liste-Origine vers Sélection on fait une copie de l'élément que l'on ajoute à Sélection;
Déplacement de Sélection vers Poubelle on supprime l'élément dans Sélection, et Poubelle reste vide donc pas de déplacement possible en sa provenance (voilà pourquoi c'est mis en gris dans la liste ci-dessus).

Une fois tout cela écrit il est plus facile d'écrire la fonction à appliquer sur le « drop ».

Au final on en arrive à la fonction suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function handleDrop(e) {
  if (e.stopPropagation) {
    e.stopPropagation();
    e.preventDefault();
  }
  var oDest = this;
  var elem = document.getElementById(e.dataTransfer.getData("Text"));
  elem.id = "";
  // récup. le parent
  var oParent = elem.parentNode;
  // on ne repose pas dans le même conteneur
  if (oParent !== oDest) {
    // si on atterrit dans la poubelle
    if (oDest === poubelle) {
      // et que l'on vient de la sélection
      if (oParent === cartArea) {
        // on supprime l'élément
        oParent.removeChild(elem);
      }
    }
    // si on atterrit dans la sélection
    if (oDest === cartArea) {
      // on ajoute une copie de l'élément
      var clone = elem.cloneNode(true);
      // ne pas oublier de remettre l'observateur qui n'est pas cloné
      clone.addEventListener("dragstart", handleDragStart, false);
      oDest.appendChild(clone);
    }
    // met à jour données
    Update();
  }
  return false;
}

**BROADSIDER** · 06/02/2019, 18h33

Je ne sais comment te remercier Nosmocking! Tu m'as enfin permis de me débloquer après toutes ces heures d'acharnement et surtout de mieux comprendre le drag & drop merci beaucoup et bonne continuation!!

Drag & Drop Bug de mise à la poubelle

JavaScript

Partager

Partager