В Elm, как я могу определить положение мыши относительно HTML-элемента?

Question

Я хотел бы знать положение мыши относительно элемента HTML. Я бы также знал размер элемента.

Answer 1

Возможно определить положение мыши с помощью события mouseMove. Это пример того, как это можно реализовать с помощью The Elm Architecture.

Вид:

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

Декодер:

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

Псевдоним типа

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

И сообщение

type Msg
    = MouseMove MouseMoveData

И вот как данные поступают в обновление:

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 )

Это библиотека, которая делает похожую вещь: http://package.elm-lang.org/packages/mbr/elm-mouse-events/1.0.4/MouseEvents