Bonjour,
j ai essayer d adapter un exemple "statique" de drag and drop en dynamique mais le drop ne
fonctionne absolument pas...
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
77
 
<!DOCTYPE HTML>
<html>
<head>
<style>
 
</style>
<script>
// statiquement on aurait:
// ex <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
//<div id="div1"><span style="font-size:45px;cursor:pointer;" draggable="true" ondragstart="drag(event)" id="drag1">1</span></div>
// mais dynamiquement?
 
function allowDrop(ev) {
    ev.preventDefault();
 
}
 
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
    event.dataTransfer.effectAllowed = "copy";
}
 
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
 
function creat(){
 
var el = document.createElement ("div");
el.id="div2";
el.style.position="absolute"; 
el.style.border="3px solid #0000ff";
 
el.style.... etc
 
el.addEventListener("drop", drop,false); 
 
el.addEventListener("dragover", allowDrop,false);
 
document.body.appendChild(el);
 
 
 
var el = document.createElement ("div");
el.id="div1";
el.style.position="absolute"; 
el.style.border="3px solid #00ffff";
 
el.style. etc
 
el.style.textAlign = "center";
 
 
// on prepare le span 
var np = document.createElement("span");
np.textContent ="essai";
np.style.color="blue";
// on lui ajoute le draggable
np.addEventListener("dragstart", drag,false);
np.draggable=true; 
 
el.appendChild(np);
document.body.appendChild(el);
 
}
 
</script>
</head>
<body onload="creat()">
 
 
</body>
 
</html>
Bizarre que represente event dans event.dataTransfer.effectAllowed = "copy"; par rapport a ev?
En vous remerciant.