[Dom] Drag and Drop

Version imprimable

[Dom] Drag and Drop

:(Bonjour,
j ai essayer d adapter un exemple "statique" de drag and drop en dynamique mais le drop ne
fonctionne absolument pas...

Code:

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.

28/09/2015, 11h29
melka one

jour

la premier erreur c'est de mettre le onload dans le body alors que ce doit être la fenêtre

Code:

window.addEventListener("load",creat, false);

a mettre dans tons cas dans le header

le deuxième problème c'est que tu ne donne pas d'id au span donc la pas possibilité de faire quelle que chose

Citation:

que represente event dans event.dataTransfer.effectAllowed = "copy"; par rapport a ev?

si il s'agisait de ie8 pas de probleme mais la l'evenement passe par le paramètre de fonction qui dans ton cas est ev sinon cette ligne sert a comme effet de curseur au moment du déplacement ne pas l'utiliser gène en rien le fonctionnement du script

DOM DRAG AND DROP

Merci bien,j ai modifié ainsi cela fonctionne...

Code:

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
78
79
80
81
82
83
84
85
 
<!DOCTYPE HTML>
<html>
<head>
<style>
 
</style>
<script>
window.addEventListener("load",creat, false);
// 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/plain", 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 = "div1";
//el.innerHTML =el.id; 
el.innerHTML="";
 
el.style.position="absolute"; 
el.style.width="100px";
el.style.height="100px";
el.style.borderRadius = "12px";
el.style.border="1px solid #ff00ff";
el.style.left="200px";
el.style.top="100px";
el.style.textAlign = "center";
 
var np = document.createElement("span");
np.style.fontSize = "40px";
np.id="b1";
np.textContent ="U";
np.style.color="green";
el.appendChild(np); 
document.body.appendChild(el); 
np.draggable='true'; 
np.addEventListener("dragstart", drag,false);
alert('div 1 ok');
var el = document.createElement('div');
    el.id = "div2";
//el.innerHTML =el.id; 
el.innerHTML="";
 
el.style.position="absolute"; 
el.style.width="100px";
el.style.height="100px";
el.style.borderRadius = "12px";
el.style.border="1px solid #0000ff";
el.style.left="400px";
el.style.top="100px";
el.style.textAlign = "center";
document.body.appendChild(el); 
el.addEventListener("drop", drop,false); // ex <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
el.addEventListener("dragover", allowDrop,false);
 
 
}
:P
</script>
</head>
<body>
 
 
</div>
 
</body>
 
</html>