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 

,174,

그리고이 데이터가 업데이트에 도착하는 방법이다는 : http://package.elm-lang.org/packages/mbr/elm-mouse-events/1.0.4/MouseEvents

:

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) 

이 비슷한 일을하는 라이브러리입니다