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 lespace cible |

| ondragleave | dragleave | On sort de lespace source |

| ondragover | dragover | On survole lespace 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);

<!-- 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 quon 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();

// On r cup re le contenu

var data = e.dataTransfer.getData("text");

// on lutilise selon le contexte

e.target.src = document.getElementById(data).src;

}