[Dom] Drag and Drop

**luclabulle** · 28/09/2015, 10h27

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.

**melka one** · 28/09/2015, 11h29

jour

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

Code :

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

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

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

**luclabulle** · 28/09/2015, 19h35

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

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
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>

[Dom] Drag and Drop

JavaScript

Discussions similaires

Partager

Partager