I'm working off the elm-lang.org/examples/drag and trying to do a
'mouseover' action whilst I've got the green box being dragged. However,
the 'mouseover' does not fire while the box is being dragged.
I've reproduced this by making some minimal changes to the example code. If
you copy/paste this over the example, everything should be the same except
for this text at the top: Drag over me and it should crash!
The only difference is that this text has a 'mouseover' that fires off a
'Crash' message which causes the update function to do a Debug.crash
If you move your mouse over it, it will cause elm to crash (in the console).
But if you drag the box over it, elm doesn't crash because it doesn't
register the 'mouseover' message.
```
import Html exposing (..)
import Html.App as Html
import Html.Attributes exposing (..)
import Html.Events exposing (on)
import Json.Decode as Json exposing ((:=))
import Mouse exposing (Position)
main =
Html.program
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}
-- MODEL
type alias Model =
{ position : Position
, drag : Maybe Drag
}
type alias Drag =
{ start : Position
, current : Position
}
init : ( Model, Cmd Msg )
init =
( Model (Position 200 200) Nothing, Cmd.none )
-- UPDATE
type Msg
= DragStart Position
| DragAt Position
| DragEnd Position
| Crash
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
( updateHelp msg model, Cmd.none )
updateHelp : Msg -> Model -> Model
updateHelp msg ({position, drag} as model) =
case msg of
DragStart xy ->
Model position (Just (Drag xy xy))
DragAt xy ->
Model position (Maybe.map (\{start} -> Drag start xy) drag)
DragEnd _ ->
Model (getPosition model) Nothing
Crash -> Debug.crash "Crashed!"
-- SUBSCRIPTIONS
subscriptions : Model -> Sub Msg
subscriptions model =
case model.drag of
Nothing ->
Sub.none
Just _ ->
Sub.batch [ Mouse.moves DragAt, Mouse.ups DragEnd ]
-- VIEW
(=>) = (,)
view : Model -> Html Msg
view model =
let
realPosition =
getPosition model
in
div [] [
div
[ onMouseDown
, style
[ "background-color" => "#3C8D2F"
, "cursor" => "move"
, "width" => "100px"
, "height" => "100px"
, "border-radius" => "4px"
, "position" => "absolute"
, "left" => px realPosition.x
, "top" => px realPosition.y
, "color" => "white"
, "display" => "flex"
, "align-items" => "center"
, "justify-content" => "center"
]
]
[ text "Drag Me!"
],
div [on "mouseover" (Json.succeed Crash)][ text "Drag over me and it
should crash!" ]
]
px : Int -> String
px number =
toString number ++ "px"
getPosition : Model -> Position
getPosition {position, drag} =
case drag of
Nothing ->
position
Just {start,current} ->
Position
(position.x + current.x - start.x)
(position.y + current.y - start.y)
onMouseDown : Attribute Msg
onMouseDown =
on "mousedown" (Json.map DragStart Mouse.position)
```
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/d/optout.
