Bonjour,
je souhaite faire du "drag and drop" en copie avec HTML5/CSS3/Javascript.
C'est à dire que je ne souhaite pas déplacer un élément mais le copier.
J'ai lu la documentation Javascript de mon navigateur (IceCat) et ils disent qu'il suffit de le préciser ainsi :
Mais mon "drag and drop" continue de déplacer mon élément au lieu de le copier. J'ai regardé avec Google chrome et ça fait pareil :-(
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 event.dataTransfer.effectAllowed = 'copy'; event.dataTransfer.dropEffect = 'copy';
Comment faire svp?
Merci beaucoup.
HTML:
CSS:
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 <!DOCTYPE html> <html> <head> <title>Drag and drop</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="index.css" /> <script type="text/javascript" src="index.js"></script> </head> <body> <div class="box" ondragstart="javascript: dragStart(event);" ondragover="javascript: return dragOver(event);" ondrop="javascript: return drop(event);"> <div id="first" class="element" draggable="true"> Hey ! </div> </div> <div class="box" ondragstart="javascript: dragStart(event);" ondragover="javascript: return dragOver(event);" ondrop="javascript: return drop(event);"> </div> </body> </html>
JavaScript:
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 .box, .box { border: 1px; border-style: solid; border-color: black; width: 150px; height: 150px; color: black; background-color: white; float: left; } .element { border: 1px; border-style: solid; border-color: blue; width: 50px; height: 50px; color: black; background-color: gray; }
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 function dragStart(event) { event.dataTransfer.setData("Text", event.target.getAttribute('id')); event.dataTransfer.effectAllowed = 'copy'; event.dataTransfer.dropEffect = 'copy'; } function dragOver(event) { return false; } function drop(event) { event.target.appendChild( document.getElementById( event.dataTransfer.getData("Text"))); event.stopPropagation(); return false; }
Partager