Drag and drop

**sebaaas** · 23/03/2021, 22h41

Bonjour,

J'ai 2 soucis au niveau d'une drag and drop :

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
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
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
#div2 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}
 
function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}
 
function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="drag1" draggable="true" ondragstart="drag(event)" value="1.png">Pomme</div>
<div id="drag2" draggable="true" ondragstart="drag(event)" value="2.png">Poire</div>
<div id="drag3" draggable="true" ondragstart="drag(event)" value="3.png">Prune</div>
<div id="drag4" draggable="true" ondragstart="drag(event)" value="4.png">Peche</div>
</body>
</html>

1) j'aimerai que les <div> drag1234 ne disparaisse pas lorsque je vais les déposer sur les div1 ou div2
2) lorsque je dépose, j'aimerai ne pas afficher le texte "Pomme" ou "Poire" mais l'image reprise en value (donc au lieu de Pomme, il faudrait <img scr="1.png">)

Merci de votre aide

**NoSmoking** · 24/03/2021, 08h06

Bonjour,
pour commencer il serait préférable d'utiliser les data-xxx plutôt que value, ces attributs étant fait pour cela.

Code html :

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

1
2
3
4
<div id="drag1" draggable="true" ondragstart="drag(event)" data-img="1.png">Pomme</div>
<div id="drag2" draggable="true" ondragstart="drag(event)" data-img="2.png">Poire</div>
<div id="drag3" draggable="true" ondragstart="drag(event)" data-img="3.png">Prune</div>
<div id="drag4" draggable="true" ondragstart="drag(event)" data-img="4.png">Peche</div>

Lorsque tu « droppes » il te faut récupérer le contenu de data-img qui est donc l'url de l'image que tu souhaites afficher.

Il suffit donc de créer une <img> que tu ajoutes à la place de ton élément droppé, en lui affectant la bonne src.

Code :

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

1
2
3
4
5
6
7
8
9
function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  //ev.target.appendChild(document.getElementById(data));
  const element = document.getElementById(data);
  const img = document.createElement("IMG");
  img.src = element.dataset.img;
  ev.target.appendChild(img);
}

**sebaaas** · 24/03/2021, 21h19

Parfait !

Merci

Drag and drop

JavaScript

Discussions similaires

Partager

Partager