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

Slides:



Advertisements
Présentations similaires
1 JavaScript V0 : Nauer. 2 JavaScript Quid ? Langage de programmation lié à HTML. Code JavaScript intégré aux pages HTML. Code interprété par le navigateur.
Advertisements

Introduction à la Programmation Orientée Objet Retour sur les principaux concepts SI3 MAM3 Hydro Nathan Cohen
Utilisation de l’outil Firebug
créer un cadre de texte Zoomez à 100% (ce zoom vous sera utile…retenez le!). Clickez sur l'outil cadre de texte et créez depuis l'angle supérieur.
VI50 – TP3 Introduction à Virtools. Virtools Virtools Media Design 3DS, Maya, Lightwave… Sound Design wav, mp3… Texture, 2D interface jpg, bmp… Specific.
Introduction à Virtools
TP 3-4 BD21.
12 novembre 2012 Grégory Petit
Commission scolaire des Laurentides
Firebug Dévermineur Debugger.
Introduction aux Web Services Partie 1. Technologies HTML-XML
Emploi d’un logiciel de présentation graphique : PowerPoint
Développement Mobile : Android
JQuery.
Applications Internet – cours 3 La page web
Nouveautés sur le site Web transactionnel du Registre foncier Au 17 avril 2004.
Appropriation du logiciel PowerPoint
La souris.
Javascript les spécificités du langage - Partie 6 -
1/20/2000Jacques Saint-Pierre1 ACTIONS DE SOCIÉTÉS INTERNET !
Présentation de la séquence de cours sur les interactions HTML-javascript Laure Walser, 11 juin 2010.
Développement dapplication avec base de données Semaine 3 : Windows Form avec Entité Framework Automne 2013.
PhP-MySQL Pagora 2012/2013 CTD 1 - Presentation de moi ^^
AJAX.
Formation TYPO3 Lecture par « rôle » janvier 2010.
31 octobre 2012 Grégory Petit
Dans la barre des messages, cliquez sur Activer la modification,
-Présentation de l’équipe -Cadre du projet -Enjeux -Choix du sujet.
TP n°2 Javascript EVENEMENTS ET OBJETS
Les présentations assistées par ordinateur (préAO)
CSC All Reserved, Usinor Leading to Succes with CSC in the Business Intelligence Projects BW Petit Bateau 28 février 2002.
Javascript les spécificités du langage - Partie 5 -
JavaScript Nécessaire Web.
Création d’une application complète
LANGAGE HTML Le HTML (Hyper Text Markup Langage) est un langage universel utilisé sur le World Wide Web. Le HTML permet de : * Publier des documents sur.
La polyvalence des WIKIS
JavaScript.
Comment utiliser FrontPage?
Les événements Ils sont au cœur de l’interactivité des pages.
Master 1 SIGLIS Java Lecteur Stéphane Tallard Les erreurs communes en Java.
1 René Beauchamp Cours # 200 Par René Beauchamp Windows 7.
S'initier au HTML et aux feuilles de style CSS Cours 5.
Initiation au JavaScript
420-B63 Programmation Web Avancée Auteur : Frédéric Thériault 1.
Newsletter : Utilisation de MailChimp
Devine ce que c’est? But du jeu: Faire deviner une image cachée Règle du jeu: Ce jeu se joue à 2: Le joueur n°1 (qui va chercher le mot) se retourne.
Publication Flash sur Internet et Transfert avec Dreamweaver COM3562 Communication Multimédia MARS 2011.
HTML 4 et CSS 2 Cours 2 Faire acquérir à l'étudiant des connaissances de niveau intermédiaire en programmation HTML et de l'initier aux feuille de style.
TIC (Techniques de l’Information et de la Communication)
Faire déplacer le personnage à l’aide des flèches du clavier Il y a plusieurs façon de procéder selon nos attentes, mais en voici une qui est très simple:
Guillaume MICHAUD – Yvan LECOMTE
Exposé DREAMWEAVER 2 Guillaume DUBREUIL Adrien HADOUX.
FLASH SEANCE 2 Interaction avec Action Script. Action script Langage de programmation utilisé par Flash. Définir des propriétés, des actions des comportements.
** Flash séance 2 Action script. ** Action Script Ajoute de l’interactivité Permet de contrôler les clips  Langage de programmation orienté objet.
Flash 2 ème séance Interaction François Marliac Mickaël Moreira.
Flash MX – Séance 2 Interactions & ActionScript David Rapin Si28 P06.
Dreamweaver le retour Avec Les Formulaires Les Calques
FORMULAIRES FOMULAIRE Permet à l’utilisateur d’entrer des renseignements le concernant. Utilisation –Inscription sur un site –Mise à jour d’une base.
Dreamweaver 2 Plan 1.Calques 2.CSS 3.Modèles 4.Comportements 5.Formulaires 6.Mise en ligne 1 Timothée Devaux Myriam Roudy Dreamweaver 2 Printemps 2008.
Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Les formulaires permettent à l’utilisateur.
SI28 – Ecriture interactive et multimédia Sylvain Slaton – Pierre Laporte.
EXPOSE FLASH 2 SI 28 24/10/2006 Delphine GODREAU Hélène PERRIER.
L’interactivité avec ActionScript. ActionScript Langage de programmation de Flash qui permet de : Gérer des actions et des animations sur la scène Contrôler.
Interface Tutorial Flash 2 Par Vincent ² SI28 – P06 Bibliothèque Composant s Panneau actions Barre d'outils Timeline.
Dreamweaver 2 Feuilles de Style CSS Formulaires Calques Comportements
FLASH Séance 2 Xiaoliang Liang Morgane Le Nan SI28 P05.
SI28 : D REAMWEAVER 2 Audrey BUISSON – GSU05 Romain LASSALLE – GI05 1 SI28 – Ecriture interactive et multimedia.
APP-TSWD Apprentissage Par Problèmes Techniques des Sites Web Dynamiques Licence Professionnelle FNEPI Valérie Bellynck, Benjamin Brichet-Billet, Mazen.
Introduction à PowerPoint, logiciel de présentation Session hiver 2007 Commission scolaire Lac-St-Jean par Stéphanie Boivin.
UNITE 3: Production du jeu vidéo
Transcription de la présentation:

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