Accueil    Codes    Drag and drop
 



Drag and drop  Html5 - Drag and drop



Exemple de drag and drop avec html5 :






1
2
3
4




Mise en place



L'action de glisser déplacer englobe les étapes suivantes :
ondragstart : sélectionner un élément déplaçable
ondrag : faire glisser l'élément vers une zone de réception
ondrop : relâcher l'élément dans la zone de réception


    - Support du drag and drop par le navigateur



<script type="text/javascript">
//<![CDATA[
if('draggable' in document.createElement('span')) {
document.write("Drag & drop supporté");
}
else{
document.write("Drag & drop non supporté");
}
//]]>
</script>


    - Définir un élément comme déplaçable

La première étape pour réaliser un glisser déplacer est de définir un ou plusieurs éléments comme déplaçable. Ceci se fait avec l'attribut "draggable" valorisé à true. Il est parfois intéressant d'associer un style de curseur spécifique pour les éléments déplaçable (style de curseur "move") pour une meilleure compréhension de l'utilisateur.



<div id="divDragDrop" draggable="true" ondragstart="OnDragStart(this, event);">
... texte ...
</div>


    - Définir une zone de réception

Le second élément à prévoir est bien entendu la ou les zones vers lesquelles les éléments pourront être glissés. L'évènement à implémenter à ce niveau est l'évènement "ondrop". Il est nécéssaire pour les navigateurs Chrome et Firefox d'annuler l'évènement ondragover (en l'implémentant par un retour de type false) pour que le ondrop soit correctement déclenché.



<div id="divDragDrop" ondragover="return false" ondrop="OnDropTarget(this, event);">
... texte ...
</div>


    - Effectuer le déplacement de l'élément

Il faut savoir quel élément est déplacé et dans quelle zone il est déposé. Pour celà il est préférable d'associer un identifiant aux éléments déplaçables et de récupérer cette information au moment de déposer l'élément dans la zone de réception.
Celà se fait en employant les fonctions :
    dataTransfer.setData à l'appel de l'évènement ondragstart
    dataTransfer.getData à l'appel de l'évènement ondrop
On fait également appel à la fonction "preventDefault" qui empêche la propagation de l'élément.



<script type="text/javascript">
//<![CDATA[
function OnDragStart (target, evt){
   evt.dataTransfer.setData("IdElement", target.id);
}
function OnDropTarget (target, evt) {
   var id = evt.dataTransfer.getData("IdElement");
   target.appendChild(document.getElementById(id));
   evt.preventDefault();
}
//]]>
</script>