You can drag tiles now!!!!!!!!!!!!!!!!!

src/Main.elm

@@ -8,12 +8,12 @@ import Array.Extra as Array
 import Browser
 import Browser.Dom exposing (focus, getViewport, Viewport)
 import Browser.Navigation exposing (Key)
-import Browser.Events exposing (onMouseMove, onResize)
+import Browser.Events exposing (onMouseMove, onMouseUp, onResize)
 import Html exposing (Attribute, button, div, h3, input, Html, section, text)
 import Html.Attributes exposing (class, id, style, value)
 import Html.Attributes.Extra as Attributes exposing (attributeIf)
 import Html.Extra exposing (viewMaybe)
-import Html.Events exposing (onBlur, onClick, onInput, onMouseEnter)
+import Html.Events exposing (onBlur, onClick, onInput, onMouseDown, onMouseEnter)
 import Html.Lazy exposing (lazy2)
 import Json.Decode as D
 import List exposing (map, singleton)
@@ -43,6 +43,8 @@ type Msg
   | TileDeselected Int
   | HeldOverNewTile Int Int
   | NewMousePos Int Int
+  | StartDrag Int Int Tile Int Int
+  | StopDrag
 
 type alias Model =
   { columns: Array Column
@@ -86,23 +88,23 @@ init flags url browserKey =
     ]
     |> Array.fromList
   , mousePos = (200, 200)
-  , heldTile = Just
-      { hoveredColumnIndex = 0
-      , hoveredTileIndex = 0
-      , tile = Tile "hello!" []
-      }
+  , heldTile = Nothing
   }
     |> withoutCmd
 
 subscriptions : Model -> Sub Msg
-subscriptions model = Sub.batch
-  [ if (isJust model.heldTile)
-      then onMouseMove <|
-        D.map2 NewMousePos
-          (D.field "pageX" D.int)
-          (D.field "pageY" D.int)
-      else Sub.none
-  ]
+subscriptions model =
+  if (isJust model.heldTile)
+    then
+      Sub.batch
+        [ onMouseMove <|
+          D.map2 NewMousePos
+            (D.field "pageX" D.int)
+            (D.field "pageY" D.int)
+        , onMouseUp <| D.succeed StopDrag
+        ]
+    else Sub.none
+
 
 view : Model -> Browser.Document Msg
 view {columns, heldTile, mousePos} =
@@ -169,7 +171,7 @@ viewTile isTileHeld columnIndex tileIndex tile =
       )
     , attributeIf isTileHeld (onMouseEnter <| HeldOverNewTile columnIndex tileIndex)
     ]
-    [ viewGrip
+    [ viewGrip columnIndex tileIndex tile
     , input
       [ value tile.text
       , onInput (SetTileText columnIndex tileIndex)
@@ -186,13 +188,18 @@ viewTile isTileHeld columnIndex tileIndex tile =
       (map viewSticker tile.stickers)
     ]
 
-viewGrip : Html any
-viewGrip =
+viewGrip : Int -> Int -> Tile -> Html Msg
+viewGrip colIndx tileIndx tile =
   svg
     [ viewBox "0 0 103.4 103.4"
     , width "30"
     , height "30"
     , Svg.Attributes.class "drag-gripper"
+    , on "mousedown" <| (
+        D.map2 (StartDrag colIndx tileIndx tile)
+          (D.field "pageX" D.int)
+          (D.field "pageY" D.int)
+      )
     ]
     [ path
       [ d gripPath
@@ -232,6 +239,23 @@ updateTileText : String -> Tile -> Tile
 updateTileText text tile =
   { tile | text = text }
 
+removeTileFromColumn : Int -> Column -> Column
+removeTileFromColumn tileIndex column =
+  { column | tiles =
+    Array.removeAt
+      tileIndex
+      column.tiles
+  }
+
+insertTileToColumn : Int -> Tile -> Column -> Column
+insertTileToColumn tileIndex tile column =
+  { column | tiles =
+    Array.insertAt
+      tileIndex
+      tile
+      column.tiles
+  }
+
 modTileInColumn : Int -> (Tile -> Tile) -> Column -> Column
 modTileInColumn tileIndex f column =
   { column | tiles =
@@ -293,4 +317,32 @@ update msg model = case Debug.log "UPDATE" msg of
           |> withoutCmd
   NewMousePos x y ->
     { model | mousePos = (x, y) }
-    |> withoutCmd
+    |> withoutCmd
+  StartDrag colIndx tileIndx tile mouseX mouseY ->
+    let
+      modelWithTileRemoved =
+        modColumnInPage colIndx
+        (removeTileFromColumn tileIndx)
+        model
+    in
+      { modelWithTileRemoved
+      | heldTile = Just
+        { hoveredColumnIndex = colIndx
+        , hoveredTileIndex = tileIndx
+        , tile = tile
+        }
+      , mousePos = (mouseX, mouseY)
+      }
+        |> withoutCmd
+  StopDrag ->
+    case model.heldTile of
+      Nothing -> model |> withoutCmd
+      Just {hoveredColumnIndex, hoveredTileIndex, tile} ->
+        let
+          modelWithTileInserted =
+            modColumnInPage hoveredColumnIndex
+            (insertTileToColumn hoveredTileIndex tile)
+            model
+        in
+          { modelWithTileInserted | heldTile = Nothing }
+          |> withoutCmd