Discussion :

[Yobeco]

Bonjour

Je crée une application dans laquelle un enfant pourra faire des glisser-déposer d'images d'une division source vers une division cible.
Quand l'enfant clique sur une image, il entend le mot correspondant.

Ça fonctionne plutôt bien, cependant, j'ai un comportement étrange :
J'assigne un "listener" à une image pour détecter le clic sur l'image et jouer le son : ça fonctionne bien.
Lors du glisser-déposer de cette image vers la division cible, l'image est clonée, comme prévue dans la configuration de Sortable.js : super.
L'image clonée dans la division cible est toujours associée au "listener", l'enfant clique, ça jour le son : parfait.

Mais plus l'original... Cliquer l'image originale qui, avant, pouvait faire jouer le son n'a plus d'effet... Une fois que l'image originale a été clonée une fois vers la division cible, Elle ne semble plus associée au "listener".

Comment remédier à cela ?

J'ai isolé le bug dans un code minimaliste :

Isoler bug Listner qui disparaît.zip

Quelqu'un aurait une idée ?

[mathieu]

si j'ai bien compris comment fonctionne la bibliothèque sortable, la balise de départ est déplacée vers le bas. ensuite c'est un clone de cette balise qui est mis dans la zone du haut mais sans ces écouteurs.

donc pour gérer les clics, vous pouvez par exemple rajouter une classe jouer_son à la balise de départ et ensuite vous faites cela :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
document.addEventListener('click', evenement => {
 
	const element_clique = evenement["target"];
 
	if (!element_clique["classList"].contains("jouer_son")) {
		return;
	}
 
 
	console.log("Son joué !");
 
 
 
});

l'écouteur est associé au document entier mais c'est peut-être plus efficace si vous l'associez seulement aux zones de départ et d'arrivé des éléments.

[Yobeco]

Si j'ai bien compris comment fonctionne la bibliothèque Sortable.js, la balise de départ est déplacée vers le bas. ensuite c'est un clone de cette balise qui est mis dans la zone du haut mais sans ses écouteurs.

Merci pour ce précieux indice !

En fait, dans mon contexte, appliquer l'écouteur au conteneur est trop compliqué, mais j'ai trouvé comment ajouter le "listener" aux clones créés dans la division d'origine.
Et ça fonctionne bien maintenant !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Sortable.create(containerDrag, {
	group: {
		name: "container-img",
		pull: "clone",
		put: false
	},
	delay : 0,
	animation: 250,
	easing: "cubic-bezier(0.34, 1.56, 0.64, 1)",  // https://easings.net/#easeOutBack
	sort: false, // disable reorganization
 
	// Sortable.js déplace l'élément original vers la <div> cible et crée un clone vers la <div> d'origine 
	// Ajout de l'écouteur addEventListener au clone créé
	onClone: function (evt) {
		evt.clone.addEventListener('click', () => {
			direMot();
		});
	}

Voici le code complet et fonctionnel. Si ça peut aider quelqu'un :

Ajouter Listener au clone.zip

Merci beaucoup !!!