elmMousePosDown.elm

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.App as Html
import Html.Events exposing (onMouseDown, onMouseUp)
import Mouse exposing (..)


main =
  Html.program
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    }



-- MODEL


type alias Model = 
  { x: Int
  , y : Int
  , mouseDown: MouseDown
  }

init : (Model, Cmd Msg)
init =
  ({ x = 0, y = 0, mouseDown = No}, Cmd.none)


-- UPDATE

type MouseDown
  = Yes
  | No


type Msg
  = Position Int Int
  | Down MouseDown


update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Position x y ->
      ({model | x = x, y = y}, Cmd.none)
    Down isit ->
      ({model | mouseDown = isit}, Cmd.none)


-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions model =
  case model.mouseDown of
    Yes ->
      Mouse.moves (\{x, y} -> Position x y)
    No ->
      Sub.none

-- VIEW


view : Model -> Html Msg
view model =
  let
    x = model.x |> toString
    y = model.y |> toString
  in
    div
    [ onMouseDown (Down Yes)
    , onMouseUp (Down No)
    , style 
      [ ("width", "300px")
      , ("height", "300px")
      , ("border", "1px solid black")
      ]
    ] 
    [ p [] 
      [text (x ++ ", " ++ y)]
    ]