Allow deleting tiles by moving them out of a column

src/Main.elm

@@ -14,7 +14,7 @@ import Html exposing (Attribute, button, div, h3, input, Html, section, text)
 import Html.Attributes exposing (class, disabled, id, style, value)
 import Html.Attributes.Extra as Attributes exposing (attributeIf)
 import Html.Extra exposing (viewMaybe)
-import Html.Events exposing (onBlur, onClick, onInput, onMouseDown, onMouseEnter)
+import Html.Events exposing (onBlur, onClick, onInput, onMouseDown, onMouseEnter, onMouseLeave)
 import Html.Lazy exposing (lazy, lazy2)
 import Json.Decode as D
 import List exposing (map, singleton)
@@ -118,6 +118,7 @@ view {columns, heldTile, mousePos} =
 viewColumns : Maybe HeldTile -> Array Column -> Html Msg
 viewColumns heldTile columns =
   Array.indexedMap (viewColumn heldTile) columns
+    |> Array.map (singleton >> div [])
     |> Array.toList
     |> section
       [ class "columns"
@@ -157,6 +158,7 @@ viewColumn heldOverTile columnIndex {name, tiles} =
   in
     div
       [ class "column"
+      , attributeIf isTileHeld (onMouseLeave <| HeldOverNewTile -1 -1)
       ]
       ( ( h3
            []

style.sass

@@ -14,26 +14,26 @@ input
 	display: flex
 	overflow-y: auto
 
+	& > :nth-child(4n+1)
+		--color-strong: #c0d694
+		--color-weak: #e5eed4
+
+	& > :nth-child(4n+2)
+		--color-strong: #6ed8d6
+		--color-weak: #d3f3f2
+
+	& > :nth-child(4n+3)
+		--color-strong: #d3aee1
+		--color-weak: #eddef3
+
+	& > :nth-child(4n+4)
+		--color-strong: #eeab87
+		--color-weak: #f9e5db
+
 	.column
 		width: 400px
 		padding: 20px
 
-		&:nth-child(4n+1)
-			--color-strong: #c0d694
-			--color-weak: #e5eed4
-
-		&:nth-child(4n+2)
-			--color-strong: #6ed8d6
-			--color-weak: #d3f3f2
-
-		&:nth-child(4n+3)
-			--color-strong: #d3aee1
-			--color-weak: #eddef3
-
-		&:nth-child(4n+4)
-			--color-strong: #eeab87
-			--color-weak: #f9e5db
-
 		& > h3
 			color: var(--color-strong)
 		& > .add-tile