Glisser-déposer

Dans cette partie, nous allons voir comment introduire une fonctionnalité de glisser-déposer. Nous allons voir que cette fonctionnalité s'appuie sur plusieurs gestionnaires d'événements, concept que nous avons déjà utilisé par deux fois.

Grâce à plusieurs exercices de difficulté croissante, vous allez très vite comprendre comment mettre en œuvre le glisser-déposer.

Errata :

• page 2/9 : il faut entendre : " l'ensemble du code HTML de l'élément déplacé - ici une image - est déplacé à l'intérieur du conteneur cible, ici un élément div. ".
• Attention, dans les versions de jQuery supérieures à 3, l'attribut dataTransfer d'un événement n'existe plus : il faut écrire : var data = e.originalEvent.dataTransfer.getData('text/html'); (et non plus var data = e.dataTransfer.getData('text/html');)
• Entre la première session de ce MOOC et aujourd'hui, il semble que l'alignement par défaut d'un div contenant un canvas ait évolué. Ainsi, pour ne pas que la position des boîtes évolue, il faut forcer leur alignement :

#boite1 , #boite2 {
    display : inline-block ;
    vertical-align:top;
}

Texte des diapositives

Diapositives format HTML5 - 10.6 Mo (attention : numérotation absente)