<!-- Slide number: 1 -->
 # Drag & Drop Ouali mohamed
<!-- Slide number: 2 --> # Drag & Drop Drag and drop est une caractéristique très commune. Ce est lorsqu’on "saisi" un objet et on le fait glisser vers un autre emplacement. En HTML5, le glisser-déposer fait désormais partie de la norme, et tout élément peuvent être déplaçable
<!-- Slide number: 3 --> # Notions 3 notions indispensables : L’élément source (image, texte, fichier, div, etc) Le contenu à déplacer (payload) La cible (target ou drop zone)
Publicité
<!-- Slide number: 4 --> # À l'écoute des Evénements | Evènement HTML + javascript | Javascript seulement | | | --- | --- | --- | | ondragstart | dragstart | Au début du déplacement | | ondrag | drag | Encours de déplacement | | ondragenter | dragenter | On entre dans l’espace cible | | ondragleave | dragleave | On sort de l’espace source | | ondragover | dragover | On survole l’espace cible | | ondrop | drop | On effectue le dépôt (on relâche le bouton de la souris) | | ondragend | dragend | A la fin du glisser-déplacer |
<!-- Slide number: 5 -->
 ondragstart ondrag ondragleave
<!-- Slide number: 6 --> ondragover
 ondragenter ondrop ondragend
<!-- Slide number: 7 --> # Principe Créer une fonction en javascript spécifique pour chaque événement. function GererDragStart(e) { alert("Le déplacement a commencé"); } <img id="img1" src="Tunisia.png" draggable="true" ondragstart="GererDragStart(event)" /> ou var source = document.getElementById("img1"); source.addEventListener('dragstart', GererDragStart , false);
Publicité
<!-- Slide number: 8 --> # 1. Rendre un élément ‘Déplaçable’ Pour faire un élément déplaçable : définissez l'attribut ‘draggable’ à true: <img id="img1" src="Tunisia.png" draggable="true" />
<div class="column" draggable="true“ > <header>B</header> </div>
<!-- Slide number: 9 --> # 2. Quoi glisser ? – ondragstart et setData () Spécifier ce qui doit se passer quand l'élément est traîné. Ondragstart ou dragstart <img id="img1" src="Tunisia.png" draggable="true" ondragstart="GererDragStart(event)" /> Spécifier ce qu’on va glisser. On utilise : La propriété dataTransfer : va contenir les données à glisser (rempli au niveau du dragstart et lu au niveau du drop) La fonction setData() : va définir le type du contenu. function GererDragStart(e) { e.dataTransfer.setData("text", e.target.id); }
<!-- Slide number: 10 --> # 3. Où déposer ? L'événement ondragover spécifie où les données glissés peuvent être déposés. Par défaut, les données / éléments ne peuvent pas être déposés dans d'autres éléments. Pour permettre un dépôt (drop), il faut éviter la gestion par défaut de l'élément par le navigateur. Ceci est fait en appelant la méthode event.preventDefault () pour l'événement ondragover:
function GererDragOver(e) { e.preventDefault(); // Nécessaire. Permet le drop. }
<!-- Slide number: 11 --> # 4. Faire le dépôt (Drop) - ondrop Lorsque les données glissé est déposé, un événement drop se produit. function GererDrop (e) { e.preventDefault();
Publicité
// On récupère le contenu var data = e.dataTransfer.getData("text");
// on l’utilise selon le contexte e.target.src = document.getElementById(data).src; }