API glisser-déposer de HTML 5

Un "drag and drop" consiste à déplacer un élément d'une zone source vers une zone destination.
HTML 5 propose désormais une API "glisser-déposer".

Drag and drop avec jQuery UI

Pendant longtemps la seule solution pour programmer un "drag and drop" était d'utiliser le célèbre framework jQuery et plus précisément l'extension jQuery-UI.

Exemple de drag and drop avec jQuery-UI

Ci-dessous un document HTML avec des images déplaçables :

Vous pouvez déplacer les images de la boite du haut vers la boite du bas (fond rose).

Le code de l'exemple

	...
	<script src ="jquery.js"></script>
	<script src ="jquery_ui.js"></script>
<style>
	img{width : 20% ; display : inline-block ; margin : 1% ; }
	div {height :200px ; width : 900% ; background : pink ; }
</style>
</head>
<body>
	<img src ="../images/bikini.jpg" />
	<img src ="../images/seins_nus.jpg"  />
	<img src ="../images/jolie_fille.jpg" />
	<img src ="../images/trikini.jpg" />
	<div>Déposez ici vos photos préférées</div>
<script>
	$("img").draggable(); 
	$("div").droppable(); 
</script>
...

Partie HEAD : il faut charger deux fichiers JS (celui de la librairie jQuery et celui de l'extension jQuery UI).
Par contre dans le cadre d'un "glisser-déposer" il n'est pas nécessaire de charger la feuille de style de la librairie jQuery UI.

CSS : Les images sont des éléments inline-block (boites disposées côte à côte).

HTML : insertion de quatre images et création d'une grande boite avec un fond rose.

la méthode draggable() aux images
la méthode droppable() à la boîte DIV

La première méthode rend "glissable" les éléments référencés (donc ici les images).
La deuxième méthode rend "déposable" les éléments référencés (donc ici une seule boîte: le DIV unique).
Donc on pourra faire glisser les images pour les déposer dans la boîte DIV.

Utilisation de l'API glisser-déposer d'HTML 5

Désormais avec l'API "glisser-déposer" il est possible de programmer un 'drag and drop' en JS standard.

Le rendu

Ci-dessous un document HTML avec des images déplaçables :

Vous pouvez déplacer les images de la boite de gauche vers la boite de droite.

Code CSS & HTML

...
<style>
	img {width : 10% ; margin : 2% }
	div {width : 45% ; height : 200px ; border : 1px solid black; margin : 10px; display : inline-block; vertical-align : top;}
</style>
</head><body>
<div id ="source">
<h3>Zone source</h3>
	<img  src="../images/france.jpg"  ondragstart="glisser(event)"  id ="image1">
	<img  src="../images/hollande.jpg"  ondragstart="glisser(event)"  id ="image2">
</div>
<div id="destination" ondrop="deposer(event)" ondragover="survoler(event)">
	<h3>Zone destination</h3>
</div>
...

Pour les images (balises IMG) et les liens hypertexte ( balises A), l'attribut "draggable ='true' " est facultatif.

On appelle la fonction "glisser(event)" sur chaque élément déplaçables et pour l'évènement "ondragstart"

"survoler(event)" sur l'évènement "ondragover"
"deposer(event)" sur l'évènement "ondrop"

Evénements utilisés pour le drag and drop

ondragstart : début du glisssmennt
ondragover : élément en cours de glissement, survole la zone de destination
ondrop : élément déposé dans la zone de destination

Le script

function survoler(event) 
{ 
	event.preventDefault(); // annulation du comportement par défaut 
}
function glisser(event) 
{ event.dataTransfer.setData("text", event.target.id);}
function deposer(event) 
{
  event.preventDefault(); // annulation du comportement par défaut
  var data = event.dataTransfer.getData("text");
  event.target.appendChild(document.getElementById(data));
}

La fonction survoler() sur "ondragover" pour la zone de destination, ne contient qu'une instruction : "event.preventDefault()". Je rappelle que cette instruction JS annule le comportement par défaut.
Il est impératif de désactiver pour l'événement ondragover le comportement par défaut des navigateurs qui réfusent tout dépôt.

Pour transférer les données d'une zone source vers une zone destination il faut utiliser l'objet dataTransfer.
Cet objet comprend deux méthodes setData() & getData().
La methode setData() permet de mémoriser les données à déposer. Elle comprend deux paramètres : le premier est "text" et le deuxième précise le type de donnée à déposer
La méthode getDate() permet de récupérer les données mémorisées par la méthode précédente. getData() ne comprend qu'un argument : "text".

La fonction glisser() sur chaque élément déplaçable, permet de mémoriser dans l'exemple, l'ID de l'élement déplacé.

La fonction deposer() sur l'évènement "ondrop" pour la zone de destination permet de récupérer l'ID de l'élément déplacé et de créer un élément dans la zone de destination.

Drag and drop en JS standard : autre exemple

Dans ce deuxième exemple on rend déplaçables des images mais aussi une liste à puces.
De plus le curseur doit changer d'aspect dès le début du "drag".

Le rendu

Ci-dessous un document HTML avec des éléments de différentes nature déplaçables.

Dès qu'un élément déplaçable est pointé, le curseur change d'aspect : une croix de flèches doubles.

Le code CSS & HTML

...
	[draggable =true] {cursor : move; }
</style>
</head>
<body>
<div id ="source">
<h3>Zone source</h3>
	<img  src="../images/france.jpg"  draggable ="true" ondragstart="glisser(event)"  id ="image1">
	<img  src="../images/hollande.jpg" draggable ="true"  ondragstart="glisser(event)"  id ="image2">

<ul draggable ="true" ondragstart="glisser(event)" id ='liste'>
	<li> item 1</li>
	<li> item 2</li>
	<li> item 3</li>
</ul>
</div>
<div id="destination" ondrop="deposer(event)" ondragover="survoler(event)">
<h3>Zone destination</h3>
</div>

Notez la règle de style : [draggable =true] {cursor : move; }
Cette règle modififie l'apparence du curseur lorqu'il pointe un élément "draggable".
Il faut donc rajouter l'attribut draggable ="true" à tous les éléments déplaçables y compris les images et les liens hypertextes.

Le script

Il est identique à celui de l'exemple précédent.

Traduction

Tutoriel HTML - sommaire

Révisions HTML4

HTML5 : nouvelles balises et nouveaux attributs

Des API HTML utiles - des applications monopages

Tutoriel HTML5 - recherche

L'auteur : Patrick Darcheville

API glisser-déposer de HTML 5

Drag and drop avec jQuery UI

Exemple de drag and drop avec jQuery-UI

Le code de l'exemple

Utilisation de l'API glisser-déposer d'HTML 5

Le rendu

Code CSS & HTML

Evénements utilisés pour le drag and drop

Le script

Drag and drop en JS standard : autre exemple

Le rendu

Le code CSS & HTML

Le script