IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[DOM] [Drag N Drop] Element HTML sous le curseur


Sujet :

JavaScript

  1. #1
    Membre actif
    Avatar de nicolas.pied
    Profil pro
    Ingénieur d'Etudes
    Inscrit en
    Janvier 2005
    Messages
    249
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Ingénieur d'Etudes

    Informations forums :
    Inscription : Janvier 2005
    Messages : 249
    Points : 235
    Points
    235
    Par défaut [DOM] [Drag N Drop] Element HTML sous le curseur
    Bonjour,

    Savez-vous comment obtenir l'élément HTML présent sous le curseur de la souris ? J'en aurais besoin pour un script de drag and drop (je l'avais déjà implémenté mais je n'arrive plus à mettre la main dessus. Il me semble que l'on passe par un event de type MouseEvent)

    Merci bien !
    Un peu d'humour : jokes.guppix.fr
    Articles et actualités informatiques : Kbups.org
    Articles sur le développement informatique : nicolaspied.developpez.com

  2. #2
    Membre averti
    Inscrit en
    Novembre 2006
    Messages
    336
    Détails du profil
    Informations forums :
    Inscription : Novembre 2006
    Messages : 336
    Points : 374
    Points
    374
    Par défaut
    Salut,
    Il te faut récuperer la position de la souris pendant le drag et ajouter un offset qui correspondra à la taille présumée du curseur.

  3. #3
    Membre actif
    Avatar de nicolas.pied
    Profil pro
    Ingénieur d'Etudes
    Inscrit en
    Janvier 2005
    Messages
    249
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Ingénieur d'Etudes

    Informations forums :
    Inscription : Janvier 2005
    Messages : 249
    Points : 235
    Points
    235
    Par défaut
    Oui, je le sais déjà ; mais comment obtenir à tout instant, l'objet HTML se trouvant sous le curseur ?
    Un peu d'humour : jokes.guppix.fr
    Articles et actualités informatiques : Kbups.org
    Articles sur le développement informatique : nicolaspied.developpez.com

  4. #4
    Membre averti
    Inscrit en
    Novembre 2006
    Messages
    336
    Détails du profil
    Informations forums :
    Inscription : Novembre 2006
    Messages : 336
    Points : 374
    Points
    374
    Par défaut
    En principe tu le déplaces tant que l'évenement mousedown est effectif sur lui, et tu changes sa position avec un mousemove sur le document.body.

    T'as des lib qui font ça très bien (mootools)

  5. #5
    Membre actif
    Avatar de nicolas.pied
    Profil pro
    Ingénieur d'Etudes
    Inscrit en
    Janvier 2005
    Messages
    249
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Ingénieur d'Etudes

    Informations forums :
    Inscription : Janvier 2005
    Messages : 249
    Points : 235
    Points
    235
    Par défaut
    Mon problème n'est pas de réaliser le drag and drop, il existe pour cela des librairies qui permettre de le réaliser juste avec un appel de fonction. Mon problème est en fait de pouvoir récupérer l'élément HTML (donc une TD, une DIV, etc.) se trouvant derrière le curseur de souris. Je sais que c'est possible et qu'il faut pour cela utiliser en partie MouveEvent, mais je ne sais plus comment utiliser cet évènement pour répondre à mon besoin.
    Un peu d'humour : jokes.guppix.fr
    Articles et actualités informatiques : Kbups.org
    Articles sur le développement informatique : nicolaspied.developpez.com

  6. #6
    Membre averti
    Inscrit en
    Novembre 2006
    Messages
    336
    Détails du profil
    Informations forums :
    Inscription : Novembre 2006
    Messages : 336
    Points : 374
    Points
    374
    Par défaut
    Bah si tu utilises une librairie, t'es capable de savoir quel élement est dragué (lui ou son ghost), du coup tu peux définir un offset!

    Tu utilises quoi comme librarie?

  7. #7
    Membre actif
    Avatar de nicolas.pied
    Profil pro
    Ingénieur d'Etudes
    Inscrit en
    Janvier 2005
    Messages
    249
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Ingénieur d'Etudes

    Informations forums :
    Inscription : Janvier 2005
    Messages : 249
    Points : 235
    Points
    235
    Par défaut
    J'utilise scriptaculous, mais là n'est pas le problème.

    Je souhaite juste connaître à partir d'un évènement de type MouseEvent, l'élément HTML se trouvant sous mon curseur de souris, donc l'élément HTML qui englobe cette coordonnée. (J'ai donc juste besoin d'interroger DOM pour savoir qui est à cette position.)
    Un peu d'humour : jokes.guppix.fr
    Articles et actualités informatiques : Kbups.org
    Articles sur le développement informatique : nicolaspied.developpez.com

  8. #8
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 661
    Points
    66 661
    Billets dans le blog
    1
    Par défaut
    à part attribuer un onmouseover à tous les élement de la page ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  9. #9
    Membre habitué
    Profil pro
    Inscrit en
    Janvier 2004
    Messages
    130
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2004
    Messages : 130
    Points : 127
    Points
    127
    Par défaut
    Salut,
    d'après ce que j'ai lu et testé, il y a deux solutions:
    - soit il faut parcourir TOUS les éléments présents dans le document, et comparer leur position avec celle de la souris.
    - soit définir toi-même les éléments qui peuvent être des points de chute, et parcourir ceux-là (ça limite la lourdeur du traitement) puis comparer leur position avec celle de la souris.

    Un tuto que j'ai trouvé très sympa : http://www.webreference.com/programm...column2/2.html

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. drag and drop depuis HTML
    Par pastaska dans le forum Composants
    Réponses: 0
    Dernier message: 02/03/2010, 10h01
  2. Drag and Drop ListBox -> HTML
    Par babar93 dans le forum Silverlight
    Réponses: 1
    Dernier message: 02/12/2009, 20h22
  3. Drag And Drop en HTML
    Par faressam dans le forum Général JavaScript
    Réponses: 15
    Dernier message: 11/08/2008, 15h02
  4. drag and drop march pas sous firefox+joomla!
    Par tecap dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 02/10/2007, 10h16
  5. Changer la classe d'un element HTML sous IE
    Par lemok dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 19/07/2007, 17h13

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo