elm-drag-and-drop.elm

module Main exposing (main)

import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
import Html.Attributes exposing (style)
import Draggable


type alias Model =
    { count : Int
    , position : (Int, Int)
    , drag : Draggable.State String
    }


initialModel : Model
initialModel =
    { count = 0
    , position = (0, 0) 
    , drag = Draggable.init 
    }
    
init : flags -> (Model, Cmd Msg)
init _ =
    ( initialModel, Cmd.none)


type Msg
    = Increment
    | Decrement
    | OnDragBy Draggable.Delta
    | DragMsg (Draggable.Msg String)


dragConfig : Draggable.Config String Msg
dragConfig =
    Draggable.basicConfig OnDragBy
    
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Increment ->
            ({ model | count = model.count + 1 }, Cmd.none)

        Decrement ->
            ({ model | count = model.count - 1 }, Cmd.none)
           
        OnDragBy (dx, dy) ->
            let
                (x,y) =
                    model.position
            in
              ( { model | position = ( round (toFloat x + dx), round (toFloat y + dy) ) }, Cmd.none )
        
        DragMsg dragMsg ->
          Draggable.update dragConfig dragMsg model

view : Model -> Html Msg
view model =
    let
       (x, y) = model.position
       newX = ((String.fromInt (x - 0)) ++ "px")
       newY = ((String.fromInt (y - 0)) ++ "px")
    in
    div []
        [ button [ onClick Increment ] [ text "+1" ]
        , div [] [ text <| String.fromInt model.count ]
        , button [ onClick Decrement ] [ text "-1" ]
        , div [Draggable.mouseTrigger "my-element" DragMsg][text "Drag me"]
        , div [  style "position" "fixed"
                , style "width" "32px"
                , style "height" "32px"
                , style "border" "2px solid red"
                , style "top" newY
                , style "left" newX
                ][text "Sup"]
        ]

subscriptions : Model -> Sub Msg
subscriptions { drag } =
    Draggable.subscriptions DragMsg drag
    
main : Program () Model Msg
main =
    Browser.element
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        }