Pragmatic drag and drop

package.json

@@ -13,6 +13,7 @@
     "lint:fix": "eslint --fix ."
   },
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.1.9",
     "@preact/signals": "^1.2.3",
     "colorjs.io": "^0.5.0",
     "preact": "^10.22.0",

src/components/BoardItem.tsx

@@ -2,36 +2,69 @@ import { Link } from "wouter-preact"
 import { JSX } from "preact/jsx-runtime"
 import { Pos } from "../types/pos"
 import { Board } from "../types/board"
+import { useEffect, useRef } from "preact/hooks"
+import { draggable, dropTargetForElements, monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine"
 
 export default function BoardItem(
   {
     board,
     pos,
     cardsNum,
-    handleDragEnd,
     handleDragOver,
-    handleDragStart,
-    handleDrop
+    handleDrop,
   }: {
     board: Omit<Board, 'lists'>
     pos: Pos
     cardsNum: number
-    handleDragEnd: (e: JSX.TargetedDragEvent<HTMLDivElement>) => void
     handleDragOver: (e: JSX.TargetedDragEvent<HTMLDivElement>) => void
-    handleDragStart: (e: JSX.TargetedDragEvent<HTMLDivElement>) => void
-    handleDrop: (e: JSX.TargetedDragEvent<HTMLDivElement>) => void
+    handleDrop: (elemTarget: HTMLDivElement, elemSource: HTMLDivElement) => void
   }
 ) {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const el = ref.current
+    if (el) {
+      return combine(
+        draggable({
+          element: el,
+          onDragStart: () => {
+            console.log('draggable: drag start')
+          },
+          onDrop: () => {
+            console.log('draggable: drop')
+          },
+        }),
+        dropTargetForElements({
+          element: el,
+          onDragEnter: () => {
+            console.log('target: drag enter')
+          },
+          onDragLeave: () => {
+            console.log('target: drag leave')
+          },
+          onDrop: () => {
+            console.log('target: drop')
+          }
+        }),
+        monitorForElements({
+          onDrop({ location, source }) {
+            const target = location.current.dropTargets[0]
+            handleDrop(target.element as HTMLDivElement, source.element as HTMLDivElement)
+          },
+        }),
+      )
+    }
+  }, [])
+
   return (
     <div
       class={`flex-column h-20 bg-primary parent-hiding-child border-solid border-2 border-color-primary hover-bg-board-item bg-${board.bgColor ? board.bgColor : 'primary'}`}
-      draggable
-      onDragEnd={handleDragEnd}
       onDragOver={handleDragOver}
-      onDragStart={handleDragStart}
-      onDrop={handleDrop}
       data-board-id={board.id}
       data-pos={pos}
+      ref={ref}
     >
       <Link
         class="p-4 cursor-pointer flex-column layout-stack-2 text-decoration-none text-primary"

src/components/BoardList.tsx

@@ -9,17 +9,13 @@ import IconClose from "./IconClose"
 export default function BoardList(
   {
     boards,
-    handleDragEnd,
     handleDragOver,
-    handleDragStart,
     handleDrop,
     handleToggleDialog
   }: {
     boards: Board[]
-    handleDragEnd: () => void
     handleDragOver: (e: JSX.TargetedDragEvent<HTMLDivElement>) => void
-    handleDragStart: (e: JSX.TargetedDragEvent<HTMLDivElement>) => void
-    handleDrop: (e: JSX.TargetedDragEvent<HTMLDivElement>) => void
+    handleDrop: (elemTarget: HTMLDivElement, elemSource: HTMLDivElement) => void
     handleToggleDialog: (e: JSX.TargetedMouseEvent<HTMLButtonElement>) => void
   }
 ) {
@@ -81,9 +77,7 @@ export default function BoardList(
                 board={board}
                 pos={idx === 0 ? "first" : (idx === (boards.length - 1) ? "last" : "middle")}
                 cardsNum={board.lists.map(l => l.cards.length).reduce((accumulator, value) => { return accumulator + value }, 0)}
-                handleDragEnd={handleDragEnd}
                 handleDragOver={handleDragOver}
-                handleDragStart={handleDragStart}
                 handleDrop={handleDrop}
               />
             )

src/components/PageComponents.tsx

@@ -113,9 +113,7 @@ export default function PageComponents() {
               board={board1}
               pos="first"
               cardsNum={8}
-              handleDragEnd={() => { }}
               handleDragOver={() => { }}
-              handleDragStart={() => { }}
               handleDrop={() => { }}
             />
           </div>
@@ -125,9 +123,7 @@ export default function PageComponents() {
           <div>
             <BoardList
               boards={boards}
-              handleDragEnd={() => { }}
               handleDragOver={() => { }}
-              handleDragStart={() => { }}
               handleDrop={() => { }}
               handleToggleDialog={() => { }}
             />

src/components/PageIndex.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'preact/hooks'
+import { useRef } from 'preact/hooks'
 import { JSX } from 'preact/jsx-runtime'
 import { Signal } from '@preact/signals'
 import { ApplicationService } from '../applications/applicationService'
@@ -14,7 +14,6 @@ import IconMoreHoriz from './IconMoreHoriz'
 import { showBoardDialog } from '../main'
 
 export default function PageIndex({ appState }: { appState: Signal<State> }) {
-  const [draggingBoardId, setDraggingBoardId] = useState<string | undefined>(undefined)
   const detailsElement = useRef<HTMLDetailsElement>(null)
   const repository = new RepositoryLocalStorage()
   const service = new ApplicationService(repository)
@@ -56,24 +55,15 @@ export default function PageIndex({ appState }: { appState: Signal<State> }) {
     }
   }
 
-  const handleDragEnd = () => setDraggingBoardId(undefined)
-
   const handleDragOver = (e: JSX.TargetedDragEvent<HTMLDivElement>) => e.preventDefault()
 
-  const handleDragStart = (e: JSX.TargetedDragEvent<HTMLDivElement>) => {
-    if (e.dataTransfer) {
-      e.dataTransfer.effectAllowed = 'move'
-    }
-    const { boardId } = e.currentTarget.dataset
-    if (boardId) {
-      setTimeout(() => { setDraggingBoardId(boardId) }, 100)
-    }
-  }
-
-  const handleDrop = (e: JSX.TargetedDragEvent<HTMLDivElement>) => {
-    const { boardId, pos } = e.currentTarget.dataset
-    if (boardId && pos && draggingBoardId) {
-      appState.value = service.moveBoard(appState.value, draggingBoardId, pos as Pos, boardId)
+  const handleDrop = (elemTarget: HTMLDivElement, elemSource: HTMLDivElement) => {
+    const { boardId, pos } = elemTarget.dataset
+    if (boardId && pos) {
+      const sourceBoardId = elemSource.dataset.boardId
+      if (sourceBoardId) {
+        appState.value = service.moveBoard(appState.value, sourceBoardId, pos as Pos, boardId)
+      }
     }
   }
 
@@ -160,9 +150,7 @@ export default function PageIndex({ appState }: { appState: Signal<State> }) {
           <div class="overflow-y-auto">
             <BoardList
               boards={appState.value.boards}
-              handleDragEnd={handleDragEnd}
               handleDragOver={handleDragOver}
-              handleDragStart={handleDragStart}
               handleDrop={handleDrop}
               handleToggleDialog={handleToggleDialog}
             />