app.js

// We need to import the CSS so that webpack will load it.
// The MiniCssExtractPlugin is used to separate it out into
// its own CSS file.
import 'bootstrap';
import css from "../css/app.scss"

// webpack automatically bundles all modules in your
// entry points. Those entry points can be configured
// in "webpack.config.js".
//
// Import dependencies
//
import "phoenix_html"

// Import local files
//
// Local files can be imported directly using relative paths, for example:
// import socket from "./socket"

import { Socket } from "phoenix"
import { LiveSocket, debug } from "phoenix_live_view"

let Hooks = {}

// Input autofocus and cancel create
Hooks.Focus = {
    mounted() {
        let componentSelector = "#" + this.el.getAttribute("data-component")
        this.el.focus()
        this.el.addEventListener("keyup", e => {
            if (e.keyCode == 27) {
                this.pushEventTo(componentSelector, "cancel", {})
            }
        })
    }
}

const getListId = event => event.target.closest(".list").getAttribute("phx-value-list_id")

Hooks.Draggable = {
    mounted() {
        this.el.addEventListener("dragstart", event => {
            event.target.style.opacity = .7
            const type = event.target.getAttribute("phx-value-draggable_type")
            const id = event.target.getAttribute("phx-value-draggable_id")
            event.dataTransfer.setData("text/plain", type + "," + id)
        }, false)

        this.el.addEventListener("dragend", event => {
            event.target.style.opacity = ""
        }, false)

        this.el.addEventListener("drop", event => {
            event.preventDefault()
            event.target.style.background = ""
        }, false)
    }
}

Hooks.DropContainer = {
    mounted() {
        this.el.addEventListener("dragover", event => {
            event.preventDefault()
        }, false)

        this.el.addEventListener("dragenter", event => {
            event.target.style.background = "lightgrey"
        }, false)

        this.el.addEventListener("dragleave", event => {
            event.target.style.background = ""
        }, false)

        this.el.addEventListener("drop", event => {
            event.preventDefault()
            event.target.style.background = ""
            const draggable = event.dataTransfer.getData("text/plain").split(",")
            const type = draggable[0]
            const id = draggable[1]
            switch (type) {
                case "item":
                    {
                        this.pushEvent("move_item", { id: id, to_list_id: getListId(event) })
                    }
                    break
                case "list":
                    {
                        this.pushEvent("swap_lists", { id: id, to_list_id: getListId(event) })
                    }
                    break
            }
        }, false)
    }
}

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
let liveSocket = new LiveSocket("/live", Socket, { hooks: Hooks, params: { _csrf_token: csrfToken } });
liveSocket.connect()