18041 sujets

Questions générales et questions de débutants

[HTML5] Drag and Drop façon copier-coller

Bonjour,

Découvrant depuis peu les nouvelles fonctionnalités de HTML5, je tente de faire un drag and drop tout en gardant l'élément source comme ceci:

###___###
#A#==>#_#
###___###

____________________________________

###___###
#A#___#A#
###___###

D'avance Merci
Bonjour,

Voici ce que tu pourrais faire :
Les trois fichiers sont dans le même répertoire. Copie au même endroit une image «image.png». Je l’ai testé uniquement sous Firefox3.6, mais je pense qu’ils devraient marcher sur les autres navigateurs qui implémentent le glisse&dépose.

glisseDepose.html

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Glissé déposé</title>
		<link rel="stylesheet" type="text/css" href="glisseDepose.css" />
	</head>
	<body>
		<div class="boite" ondragover="return false" ondrop="deposer(this, event)">
			<img alt="image déplaçable" class="deplacable" id="objet" ondragstart="glisser(this, event)" src="image.png" title="image déplaçable"/>
		</div>
		<div class="boite" ondragover="return false" ondrop="deposer(this, event)">
		</div>
		<script type="text/javascript" src="glisseDepose.js"></script>
	</body>
</html>


glisseDepose.js

"use strict";
function glisser(objet, evenement) {
	var t = objet.cloneNode(true);
	evenement.dataTransfer.setData("Text", objet.id);
	
	// On clone l’objet.
	objet.parentNode.appendChild(t);
	
	// On va modifier l’id de t pour ne pas avoir deux éléments ayant deux id identiques. 
	t.id += "-"; 
}

function deposer(objet, evenement) {
	var id = evenement.dataTransfer.getData("Text");
	objet.appendChild(document.getElementById(id));
	evenement.preventDefault();
}


glisseDepose.css

.boite {
	border:black thin solid;
	float:left;
	height:128px;
	margin:10px;
	padding:5px;
	width:256px
}

img.deplacable {
	height:2em;
	width:2em
}
Merci ton code marche, en revanche, au moment de la sélection de l'élément il est dès le début copié à côté, ce qui est gênant.

Si vous voulez enlever cet effet je vous conseille de déclarer la variable t en Global et de réaliser le "clonage" dans la fonction déposer.

Merci Adrien
Sujet clos
Aller à