Drag and drop (en copie) [Résolu]

YuGiOhJCJ · 30/09/2011, 14h36

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

NoSmoking · 30/09/2011, 15h11

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

mekal · 30/09/2011, 15h26

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 :

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

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

YuGiOhJCJ · 30/09/2011, 15h40

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.

mekal · 30/09/2011, 15h50

non non je confirme sa deplace l'element

exemple

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

NoSmoking · 30/09/2011, 17h06

à coté de mes pompes dans ma réponse

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 :

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

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.

mekal · 30/09/2011, 20h03

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 :

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

YuGiOhJCJ · 01/10/2011, 13h30

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

RÉSOLU

30/09/2011, 15h11	#2
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	Bonjour, je ne connais pas ces méthodes mais je dirais qu'il faut stopper la propagation.
	00

30/09/2011, 15h40	#4
YuGiOhJCJ Membre du Club Étudiant Inscription : janvier 2005 Messages : 161 Détails du profil Informations personnelles : Localisation : France Informations professionnelles : Activité : Étudiant Informations forums : Inscription : janvier 2005 Messages : 161 Points : 51 Points : 51	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.
	00

01/10/2011, 13h30	#8
YuGiOhJCJ Membre du Club Étudiant Inscription : janvier 2005 Messages : 161 Détails du profil Informations personnelles : Localisation : France Informations professionnelles : Activité : Étudiant Informations forums : Inscription : janvier 2005 Messages : 161 Points : 51 Points : 51	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 RÉSOLU
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email