Drag n drop sur un player flash

**virgrennes** · 31/10/2012, 18h40

bonjour,

j'ai un problème bête, mais qui m'ennuie beaucoup
j'ai un player flash qui permet de lire des morceaux
je lui ai mis un effet de drag n drop récupéré ici : http://ppk.developpez.com/tutoriels/...sur-votre-site
sous ff et ie, pas de problème, mais sous chrome, impossible d'utiliser les boutons du player, le dragndrop les désactive
j'ai essayé de mettre le dnd sur un div qui contiendrait le player, mais ça revient au même même si je change le z-index de chacun
jai essayé de desactiver le dnd au survol du player, et donc que ce soit un texte à côté contenu aussi dans le div qui fasse le dnd mais ça ne fonctionne pas non plus

Code :

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

1
2
var lecteur = document.getElementById('audio_player');
		lecteur.onmouseover = dragDrop.releaseElement();

ligne ajoutée à la fin de la fonction initElement

je dois mal écrire qqch ou le mettre mal, mais je ne vois pas quoi
qqn a une idée ?

merci d'avance

ps : merci de ne pas me répondre des trucs du genre "enlève le dnd" ça ne résoudra pas le problème et ce n'est pas constructif

**NoSmoking** · 01/11/2012, 10h27

Bonjour,

Envoyé par virgrennes

je dois mal écrire qqch ou le mettre mal, mais je ne vois pas quoi
qqn a une idée ?

il y a au moins deux choses que tu écris mal c'est quelque chose et quelqu'un

Concernant ton code

Code :

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

lecteur.onmouseover = dragDrop.releaseElement();

ici tu affectes le résultat de la fonction à l'événement.

**virgrennes** · 02/11/2012, 13h30

Bonjour,

désolée pour la syntaxe, je suis allée trop vite.

pour le code : j'ai du mal comprendre sa logique, j'ai dupliqué cette ligne (qui avait un onclick) car il me semblait qu'elle lancait la fonction releaseElement lorsque l'évènement se produisait (pour moi le onmouseover sur le player)

de fait, pourriez-vous m'aider à lancer cette fonction correctement au bon endroit ?

s'il vous plait

merci

**NoSmoking** · 02/11/2012, 17h11

Lorsque l'on mets du javascript sur un événement d'une balise, on met le code qui doit être interprété.
exemple :

Code html :

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

<a id="A_EXEMPLE_1" href="#" onmouseover="alert(this.id)">Exemple 1</a><br>

pour obtenir le même résultat, mais cette fois ci en initialisant cela dans la partie javascript il nous faut écrire

Code :

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

1
2
var obj = document.getElementById('A_EXEMPLE_2');
obj.onmouseover = function(){alert(this.id)};

ici on affecte la référence à un fonction anonyme qui exécute le code entre {}

En absence de paramètres à la fonction on pourrait simplement mettre

Code :

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

1
2
obj= document.getElementById('A_EXEMPLE_3');
obj.onmouseover = fctSimple;

mais en aucun cas

Code :

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

obj.onmouseover = fctSimple();

qui exécute la fonction et affecte le résultat à obj.onmouseover.

L'exemple

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
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<style>
</style>
</head>
<body>
<a id="A_EXEMPLE_1" href="#" onmouseover="alert(this.id)">Exemple 1</a><br>
<a id="A_EXEMPLE_2" href="#">Exemple 2</a><br>
<a id="A_EXEMPLE_3" href="#">Exemple 3</a>
<script>
function fctSimple(){
  alert('Coucou de la fonction Simple');
}
var obj = document.getElementById('A_EXEMPLE_2');
obj.onmouseover = function(){
    alert(this.id)
  };
obj = document.getElementById('A_EXEMPLE_3');
obj.onmouseover = fctSimple;
</script>
</body>
</html>

**virgrennes** · 12/11/2012, 20h38

Bonjour,

merci, tout d'abord, cela me rassure, c'est bien ce que j'avais compris et testé avant de poser la question.

Du coup, j'ai testé simplement cela :

Code :

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

str += ' onmouseover="javascript:alert(\'ok\');releaseElement();"> </embed>';

C'est dans le fichier js qui génère le embed du player.
Le ok s'affiche bien mais il m'indique releasElement is not defined.

J'ai mis l'appel de la librairie js du drag n drop avant celle qui génère le embed en partant du principe que le javascript lit dans l'ordre les fonctions et donc devrait avoit , mais ça ne change rien.

J'ai fait un autre test, j'ai enfin trouvé où mettre le code pour appeler la fonction releaseElement dans le fichier js :

Code :

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

1
2
3
4
5
 
		addEventSimple(document.getElementById('audio_player'),'mouseover',dragDrop.releaseElement);
		addEventSimple(document.getElementById('audio_player'),'mousemove',dragDrop.releaseElement);
		addEventSimple(document.getElementById('audio_player'),'mousedown',dragDrop.releaseElement);
		addEventSimple(document.getElementById('audio_player'),'click',dragDrop.releaseElement);

Et j'ai ajouté un alert dans cette fonction releaseElement en me disant, si j'empêche le dragndrop sur le player (je mets une poignée à côté), au survol je pourrais cliquer sur les boutons du player.
Résultat : le alert fonctionne, le dragndrop est bien désactivé sur le player (c'est la poignée qui le déplace) mais les boutons du player ne sont toujours pas cliquables...

Je deviens chèvre, alors j'ai une dernière option : j'empêche l'activation du dragndrop purement et simplement quand je détecte chrome, car le player est plus important, mais c'est dommage...

Si vous avez une encore une idée de pourquoi il ne se désactive pas vraiment...

PS : dans le doute, j'ai désactivé l'initialisation du dragndrop et le player fonctionne normalement, donc le player n'a pas de souci seul...

**NoSmoking** · 13/11/2012, 21h18

Code :

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

str += ' onmouseover="javascript:alert(\'ok\');releaseElement();"> </embed>';

tu ne peut pas appeler releaseElement comme cela.

Nota: inutile de mettre javascript: dans ton événement onmouseover, celui ci attend quoiqu'il arrive une action javascript.

**virgrennes** · 15/11/2012, 16h09

Bonjour,

je ne vois pas pourquoi je ne pourrais pas appeler le release ainsi c'est un type d'appel que je fais souvent et ça fonctionne habituellement, mais peut-être que cette fonction est spéciale, en ce cas pourriez vous me l'expliquer ?

dans tous les cas, ce n'est plus ça le problème puisque l'état actuel des choses correspond à la deuxième partie, le deuxième test qui a pour résultat :

Résultat : le alert fonctionne, le dragndrop est bien désactivé sur le player (c'est la poignée qui le déplace) mais les boutons du player ne sont toujours pas cliquables...

et c'est ça mon problème, pourquoi les boutons ne sont toujours pas cliquables alors que le releas désactive bien toutes les actions ?

merci d'avances pour les réponses à ces 2 questions

**NoSmoking** · 17/11/2012, 10h53

Il te faut écrire dragDrop.releaseElement(), la méthode est lié à l'objet dragDrop et non à window.

Concernant ton problème, n'aurais tu pas un soucis de hiérarchie de z-index, un élément au dessus de l'autre ne te permettant d'accéder aux boutons.

**virgrennes** · 19/11/2012, 15h37

point 1 : ok, j'ai compris, donc soit je mets dans le code js comme j'ai fait, soit je mets sur l'objet qui a l'évènement (ici le player_audio) de supprimer les actions liées au darndrop, j'ai compris

point 2 : j'ai essayé de mettre z-index:1 et z-index:2 sur le div conteneur et sur audio_player et d'inverser, sans succès ...
aurais-je du mettre plus d'écart ? z-index:10 pour l'un ?
test effectué :
j'ai mis z-index:1; au conteneur sur lequel j'applique le dragndrop et z-index:10; sur audio_player (j'ai désactivé le test de présence sur chrome ...)
puis j'ai inversé, sans effet : j'ai toujours la poignée qui déplace, le déplacement annulé sur le player, mais les boutons du player inactifs.

tant pis

**SpaceFrog** · 19/11/2012, 17h28

Un objet flash se gère en flash ...

Je complète la réponse :

Javascript n'a pas directement accès au flash. Il peut y avoir une conversation entre flash (action script) et javascript par l'intermédiaire de variables (les flashvars). Encore faut il que tu aies la main sur le code du flash.
Commence par un test d'alert ou de console.log sur le mouseover de la balise object ou embed. Ensuite il te faudra mettre en place une conversation entre le flash et javascript. Mais encore une fois tu devras avoir la main sur le script flash. A moins que l'action ne soit limitée qu'au javascript ...

**virgrennes** · 21/11/2012, 12h52

Bonjour,

effectivement, je n'ai pas accès au flash, ça m'arrive assez peu de ne pas faire mes outils moi-même et pour cause, je ne m'en sors pas après ...

donc j'ai effectivement constaté le blocage sous safari aussi, donc il faut que soit je le résolve, soit je me fasse un player moi-même.

pour ce qui est de la communication, en fait, j'avais testé de mettre un alert sur le onmousover du player, et l'alert apparaissait bien.
Afin d'être sure que le problème se fasse bien sur les actions du player je l'ai remplacé par un lien cliquable et le lien fonctionne correctement.

Donc je vais affectivement faire un player moi-même dès que possible, ce sera plus simple pour trouver où serait éventuellement l'erreur si elle persiste.

merci de votre aide à tous les 2

bonne continuation

Drag n drop sur un player flash

JavaScript

Discussions similaires

Partager

Partager