[résolu]OffsetTop ne fonctionne pas avec une barre de défilement

Bonjour à tous!
J'ai un petit souci. Pour un projet en cours, j'aimerais faire du drag'n'drop. En gros j'ai une cave à vin et j'aimerais faire un drag'n'drop d'une bouteille dans un panier. Pour connaître la position du panier en javascript, j'utilise offsetTop, offsetLeft, offsetHeight et offsetWidth mais j'ai un souci lorsqu'il faut faire défiler la page. Je vous ai mis 2 exemples pourque vous compreniez bien. Dans le deuxième exemple, faites défiler la barre et mettez une bouteille dans le panier et vous verrez que ça ne fonctionne pas.
Ma question est donc : Comment faire pour que ça fonctionne dans tous les cas ?


Exemple qui fonctionne
Exemple qui ne fonctionne pas

Merci d'avance à tous

edit : Finalement j'ai mis le panier en position:fixed et ça fonctionne
--
Titi
Modifié par Titizebioutifoul (20 Jan 2007 - 15:00)

Salut,

Sur Firefox uniquement, ça fonctionne mais c'est galère...

Lorsqu'on a une barre de défilement, on doit sélectionner une bouteille et la sortir de l'écran afin qu'elle colle au pointeur de la souris. De là, il faut sélectionner la barre de défilement et la faire descendre puis resélectionner la bouteille et la mettre dans le panier... Sur IE ou Opera, ça ne fonctionne pas.
Donc, à priori, il va falloir que tu émules le comportement de Firefox au sein des autres navigateurs...

Ceci mis à part, ton soucis véritable, c'est que si je fonctionne au clavier, je n'ai pas le droit de boire un coup.

C'est donc là quelquechose que tu as à ajouter qui pourrait déjà grandement simplifier l'opération pour tout le monde. Techniquement, ce serait faire qu'en appuyant sur une touche, on ajoute une bouteille dans le panier. Au moins, on aurait une solution de secours pour ne pas dire principale parce que nettement plus fonctionnelle.

PS : N'as-tu pas honte de présenter un tel code html sur un forum dédié aux standards ?

salut!
Merci de ta réponse. En fait, comme je le disais dans le premier topic (mais c'était peut-être pas assez claire), c'est un projet pour les cours et donc je n'ai pas le choix pour le drag'n'drop, je suis obligé de l'avoir donc pas de possibilité de faire ça au clavier

Sinon je vais me pencher sur ta solution d'émuler le comportement de Firefox au sein des autres navigateurs. Mais ça me parait bien compliquer pour un si petit problème... Tu n'as pas de solution plus simple en stock (oui je suis un fainéant ) ?

PS: Tu as tout à fait raison pour le code... j'ai honte de moi. Mais en fait j'ai fait un simple copier coller à partir d'un fichier bien plus grand qui lui est au normes W3C

La solution la plus simple est de ne pas mettre trop de bouteilles pour éviter cette barre de défilement. S'il y a un surplus, on change de page. (ou d'onglet si tu instaures ce principe)

... et le fait d'avoir un drag'n'drop n'empêche pas de le doubler d'une solution au clavier. Ca ne fait qu'améliorer.
Modifié par koala64 (07 Jan 2007 - 17:02)

C'est pas bête! J'vais voir ce que je peux faire pour mettre aussi le système du clavier. Mais je n'ai jamais gérer quoi que ce soit au clavier en JS... Tu aurais sous la main le lien vers un tuto ?

En tout cas, merci beaucoup!

Salut,
J'avais fait des essais il y a quelques temps ça aurait besoin d'être amélioré mais je pense que tu peux t'en inspirer