Dans Elm, comment puis-je détecter la position de la souris par rapport à un élément html?

Question

Je voudrais connaître la position de la souris par rapport à un élément html. Je connaîtrais aussi la taille de l'élément.

Answer 1

Il est possible de détecter la position de la souris avec l'événement mouseMove. Ceci est un exemple de la façon dont il peut être implémenté en utilisant The Elm Architecture.

La vue:

view : Model -> Html Msg 
view model = 
    div [] 
     [ img 
      [ on "mousemove" (Decode.map MouseMove decoder) 
      , src "http://..." 
      ] 
      [] 
     ] 

Le décodeur:

decoder : Decoder MouseMoveData 
decoder = 
    map4 MouseMoveData 
     (at [ "offsetX" ] int) 
     (at [ "offsetY" ] int) 
     (at [ "target", "offsetHeight" ] float) 
     (at [ "target", "offsetWidth" ] float) 

L'alias de type

type alias MouseMoveData = 
    { offsetX : Int 
    , offsetY : Int 
    , offsetHeight : Float 
    , offsetWidth : Float 
    } 

Et le message

type Msg 
    = MouseMove MouseMoveData 

Et voici comment les données arrivent à la mise à jour:

update : Msg -> Model -> (Model, Cmd Msg) 
update msg model = 
    case msg of 
     MouseMove data -> 
      -- Here you can use your "data", updating 
      -- the model with it, for example 
      ({ model | zoomMouseMove = Just data }, Cmd.none) 

C'est une bibliothèque qui fait une chose semblable: http://package.elm-lang.org/packages/mbr/elm-mouse-events/1.0.4/MouseEvents