Drag and Drop HTML 5. Intro 17/04/2013Pierre2  Drag and drop hier  Utilisation de librairies java script  JQUERY  DOJO  Constat  Dommage d’utiliser.

Présentation au sujet: "Drag and Drop HTML 5. Intro 17/04/2013Pierre2  Drag and drop hier  Utilisation de librairies java script  JQUERY  DOJO  Constat  Dommage d’utiliser."— Transcription de la présentation:

1 Drag and Drop HTML 5

2 Intro 17/04/2013Pierre2  Drag and drop hier  Utilisation de librairies java script  JQUERY  DOJO  Constat  Dommage d’utiliser des librairies pour développer des choses souvent utiles  Jeu d’échecs  Tour de Hanoï  Manipulation de fichiers  Drag and drop aujourd’hui  Fait partie du standard HTML5

3 Comment ça marche ? fc.isima.fr/~villeche/dnd/ 17/04/2013Pierre3  Etape 1  Ajouter attribut draggable = true aux éléments déplaçables:  Images  Liens  Fichiers  …  Résultat  Une ombre apparaît lorsque l’on veut déplacer l’élément  Tester différents navigateurs

4 Drag and drop envents 17/04/2013Pierre4  Dragstart  Lorsqu'un drag démarre  Dragenter  Souris déplacé sur un élément pendant un drag  Dragover  Souris passe sur un élément pendant un drag  Dragleave  Souris quitte un élément pendant un drag  Drag  Déclenché sur l’élément à l’origine du drag  Drop  Déclenché sur l’élément où le drop survient  Dragend  Lorsque le drag and drop est terminé

5 Comment ça marche ? fc.isima.fr/~villeche/dnd/ 17/04/2013Pierre5  Etape 2  Rendre élément transparent lorsque le drag commence  Bordure hachurée lorsqu’on entre dans un élément  Bordure normale lorsqu’on en sort

6 Comment ça marche ? fc.isima.fr/~villeche/dnd/ 17/04/2013Pierre6  Etape 3 = Déplacer des objets  Au dragstart  Sauvegarder l’objet origine dans une variable (dragSrcEl)  Au drop  Inverser le contenu des innerHTML de this et dragSrcEl

7 Sous firefox 17/04/2013Pierre7  Transfert de données obligatoire