basic drag and drop

elm.json

@@ -8,10 +8,10 @@
         "direct": {
             "elm/browser": "1.0.2",
             "elm/core": "1.0.5",
-            "elm/html": "1.0.0"
+            "elm/html": "1.0.0",
+            "elm/json": "1.1.3"
         },
         "indirect": {
-            "elm/json": "1.1.3",
             "elm/time": "1.0.0",
             "elm/url": "1.0.0",
             "elm/virtual-dom": "1.0.2"

src/Attachment.elm

@@ -2,6 +2,7 @@ module Attachment exposing (Attachment, init, view)
 
 import Html exposing (Html)
 import Html.Attributes as Attrs
+import Html.Events as Events
 
 
 type alias Attachment =
@@ -13,19 +14,14 @@ init =
     Attachment << abs
 
 
-view : Int -> Attachment -> Html msg
-view left { top } =
+view : Attachment -> Html msg
+view _ =
     Html.div
         [ Attrs.style "width" "15px"
         , Attrs.style "height" "15px"
         , Attrs.style "border" "1px solid blue"
         , Attrs.style "border-radius" "100%"
         , Attrs.style "background-color" "white"
         , Attrs.style "cursor" "pointer"
-
-        -- position
-        , Attrs.style "position" "absolute"
-        , Attrs.style "left" (String.fromInt left ++ "px")
-        , Attrs.style "top" (String.fromInt top ++ "px")
         ]
         []

src/Main.elm

@@ -2,33 +2,67 @@ module Main exposing (..)
 
 import Attachment exposing (Attachment)
 import Browser
+import Browser.Events
 import Comment exposing (Comment)
+import Dict exposing (Dict)
 import Html exposing (Html)
 import Html.Attributes as Attrs
+import Html.Events
+import Json.Decode as Decode
 
 
 type alias Model =
-    { attachments : List Attachment
+    { attachments : Dict Int Attachment
     , comments : List Comment
+    , dragging : Maybe Int
     }
 
 
 type Msg
-    = AddNewCommentAndAttachment
+    = MouseDownOnAttachment Int
+    | MouseUp
+    | MouseMove Int
 
 
 init : () -> ( Model, Cmd Msg )
 init _ =
-    ( { attachments = []
+    ( { attachments =
+            Dict.fromList
+                [ ( 1, Attachment 20 )
+                , ( 2, Attachment 40 )
+                , ( 3, Attachment 100 )
+                ]
       , comments = []
+      , dragging = Nothing
       }
     , Cmd.none
     )
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
-update _ _ =
-    Debug.todo "update"
+update msg model =
+    case msg of
+        MouseDownOnAttachment id ->
+            ( { model | dragging = Just id }, Cmd.none )
+
+        MouseUp ->
+            ( { model | dragging = Nothing }, Cmd.none )
+
+        MouseMove top ->
+            case model.dragging of
+                Just id ->
+                    ( { model
+                        | attachments =
+                            Dict.update
+                                id
+                                (Maybe.map (\attachment -> { attachment | top = top }))
+                                model.attachments
+                      }
+                    , Cmd.none
+                    )
+
+                Nothing ->
+                    ( model, Cmd.none )
 
 
 view : Model -> Browser.Document Msg
@@ -57,7 +91,20 @@ view model =
                 []
              ]
                 -- attachments
-                ++ List.map (Attachment.view horizMargin) model.attachments
+                ++ List.map
+                    (\( id, attachment ) ->
+                        Html.div
+                            [ Html.Events.onMouseDown (MouseDownOnAttachment id)
+
+                            -- position
+                            , Attrs.style "position" "absolute"
+                            , Attrs.style "left" (String.fromInt horizMargin ++ "px")
+                            , Attrs.style "top" (String.fromInt attachment.top ++ "px")
+                            ]
+                            [ Attachment.view attachment
+                            ]
+                    )
+                    (Dict.toList model.attachments)
                 -- comments
                 ++ List.map Comment.view model.comments
             )
@@ -71,5 +118,14 @@ main =
         { init = init
         , update = update
         , view = view
-        , subscriptions = \_ -> Sub.none
+        , subscriptions =
+            \{ dragging } ->
+                Sub.batch
+                    [ Browser.Events.onMouseUp (Decode.succeed MouseUp)
+                    , if dragging /= Nothing then
+                        Browser.Events.onMouseMove (Decode.map MouseMove (Decode.field "pageY" Decode.int))
+
+                      else
+                        Sub.none
+                    ]
         }