drag and drop d'éléments de texte

Bonjour,

je débute en javascript et je cherche à développer des activités pédagogiques pour mes élèves.

Le principe est assez simple sur la page qui s'affiche, un texte apparaît et raconte une histoire dont les événements sont dans le désordre chronologique.

L'élève doit sélectionner l'un des événement (un bout de ce texte) et le glisser-déposer dans l'une des 3 zones carrées (des containers ) situées sous le texte de façon à remettre les événement dans l'ordre chronologique.

La validation se faisant en comparant les éléments de textes (text1, text2, text3) déposés dans chacun des containers aux valeurs d'un tableau qui contiendrait les bonnes réponses : array container [événement1, événement2, événement3]

Le drag and drop d'images sur javascript est bien documenté grâce à de multiples bibliothèques js proposées, et j'y étais parvenu quand je programmais en actionscript.

Par contre je ne trouve pas de ressources claires pour mon projet.

pourriez-vous m'aider SVP ?

Je vous remercie.

Bonjour,
ce que tu décris ressemble au genre de choses que propose jQuery UI, en particulier sortable. Tu peux avoir une liste horizontale en spécifiant l’option axis: "x".

Si tu veux le coder à la main, je te déconseille la voie standard, pour des raisons exprimées ici si tu lis l’anglais. Le recours aux bons vieux évènements mouseover et mouseout, avec l’aide de la propriété event.relatedTarget, permettent d’arriver à ses fins.

Bonjour,
une discussion qui devrait t'intéresser : Drag and drop méthode setData pour dataTransfert.

Un exemple de réalisation est même fourni : https://www.developpez.net/forums/d1.../#post10349325.