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 :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
event.dataTransfer.effectAllowed = 'copy';
event.dataTransfer.dropEffect = 'copy';
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 :-(

Comment faire svp?

Merci beaucoup.

HTML:
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>
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
.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;
}
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
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;
}