Drag and drop (en copie)

Version imprimable

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:

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:

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:

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:

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

30/09/2011, 15h11
NoSmoking

Bonjour,
je ne connais pas ces méthodes mais je dirais qu'il faut stopper la propagation.

bonjour

tu fait un appendChild de ton element il est normale qu'il se trouve deplacé clone l'element puis fait l'appendChild du clone
Code:

1 2 3 4 5 6 7 8 9 10 function drop(event) { var leclone=document.getElementById(event.dataTransfer.getData("Text").cloneNode(true); event.target.appendChild(leclone); event.stopPropagation(); return false; }
et donne lui un nouvel id sinon il y aura doublon

30/09/2011, 15h40
YuGiOhJCJ

NoSmoking> Tu me proposes de stopper la propagation alors que c'est ce qu'est sensé faire event.stopPropagation(); que j'utilise déjà.

mekal>appendChild ne fait qu'ajouter un enfant à un nœud donc il devrait y avoir copie de l'élément et pas déplacement. Pour l'id, tu as probablement raison, je vais changer l'id mais ça ne corrigera pas mon problème.

non non je confirme sa deplace l'element

exemple

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<br><br>
 
<div id='bouh'style='height:20px;width:40px;background-color:black'>
 
</div>
 
<div id='ba' style='left:100px;top:100px;position:absolute;height:200px;width:400px;background-color:blue'>
</div>
<button onclick='document.getElementById("ba").appendChild(document.getElementById("bouh"))'> fdgdfg</button>
 
</body>
</html>

à coté de mes pompes dans ma réponse :oops:

Citation:

Envoyé par mekal

tu fait un appendChild de ton element il est normale qu'il se trouve deplacé clone l'element puis fait l'appendChild du clone

tout à fait VRAI, à preuve ceci marche très bien
Code:

1 2 3 4 5 6 function drop(event){ var oClone = document.getElementById( event.dataTransfer.getData("Text")).cloneNode( true); event.target.appendChild( oClone); event.stopPropagation(); return false; }
à l'ID près qui reste à gérer.

pour eviter d'avoir a utiliser un id on peut faire le clonage au moment du dragstart en stoquant le clone dans une variable en veillant a ne pas mettre d' id au div ce qui donne
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 var leclone function dragStart(event) { leclone=event.target.cloneNode(true) event.dataTransfer.setData("Text", 'ok'); event.dataTransfer.effectAllowed = 'copy'; event.dataTransfer.dropEffect = 'copy'; } function dragOver(event) { return false; } function drop(event) { event.currentTarget.appendChild(leclone); event.stopPropagation(); return false; }

01/10/2011, 13h30
YuGiOhJCJ

Bien vu, j'avais tord!

Effectivement c'était mon appendChild qui posait problème car ça effectue un déplacement de l'élément.

Si je fais un appendChild du clone, le problème est résolu.

Merci :ccool:

RÉSOLU