Drag and Drop HTML 5
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
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
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é
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
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
Sous firefox 17/04/2013Pierre7 Transfert de données obligatoire