merges in main

.github/workflows/ci.yml

@@ -6,8 +6,8 @@ jobs:
     timeout-minutes: 30
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 18
       - name: Install pnpm
@@ -27,7 +27,7 @@ jobs:
         run: pnpm tests &
       - name: Run Playwright tests
         run: npx playwright test
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report

.github/workflows/release.yml

@@ -3,19 +3,19 @@ name: Release
 on:
   push:
     tags:
-      - 'v*'
+      - "v*"
 
 jobs:
   release:
     runs-on: ubuntu-latest
     permissions:
       contents: write
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: lts/*
 

dist/index.cjs

@@ -1228,13 +1228,17 @@ function handleRootKeydown(e) {
   }
 }
 function handleRootDrop(_e) {
+  if (!isDragState(state)) return;
+  dropped = true;
+  const handleEnd4 = state.initialParent.data.config.handleEnd;
+  handleEnd4(state);
 }
 function handleRootDragover(e) {
   if (!isDragState(state)) return;
   pd(e);
 }
 function handleRootPointermove(e) {
-  if (!state.pointerDown) return;
+  if (!state.pointerDown || !state.pointerDown.validated) return;
   const config = state.pointerDown.parent.data.config;
   if (!isSynthDragState(state) && (touchDevice || !touchDevice && !config.nativeDrag)) {
     pd(e);
@@ -1675,7 +1679,8 @@ function setup(parent, parentData) {
             node: {
               el: draggableItem,
               data: nodeData
-            }
+            },
+            validated: true
           };
           draggableItem.draggable = true;
         }
@@ -1946,7 +1951,8 @@ function handleNodePointerdown(data, state2) {
   sp(data.e);
   state2.pointerDown = {
     parent: data.targetData.parent,
-    node: data.targetData.node
+    node: data.targetData.node,
+    validated: false
   };
   if (!validateDragHandle({
     x: data.e.clientX,
@@ -1955,6 +1961,11 @@ function handleNodePointerdown(data, state2) {
     config: data.targetData.parent.data.config
   }))
     return;
+  state2.pointerDown = {
+    parent: data.targetData.parent,
+    node: data.targetData.node,
+    validated: true
+  };
   handleLongPress(data, state2, data.targetData.node);
   const parentData = data.targetData.parent.data;
   let selectedNodes = [data.targetData.node];

dist/index.d.cts

@@ -680,6 +680,7 @@ type BaseDragState<T> = {
     pointerDown: {
         parent: ParentRecord<T>;
         node: NodeRecord<T>;
+        validated: boolean;
     } | undefined;
     /**
      * The original z-index of the dragged node.

dist/index.d.ts

@@ -680,6 +680,7 @@ type BaseDragState<T> = {
     pointerDown: {
         parent: ParentRecord<T>;
         node: NodeRecord<T>;
+        validated: boolean;
     } | undefined;
     /**
      * The original z-index of the dragged node.

dist/index.mjs

@@ -1137,13 +1137,17 @@ function handleRootKeydown(e) {
   }
 }
 function handleRootDrop(_e) {
+  if (!isDragState(state)) return;
+  dropped = true;
+  const handleEnd4 = state.initialParent.data.config.handleEnd;
+  handleEnd4(state);
 }
 function handleRootDragover(e) {
   if (!isDragState(state)) return;
   pd(e);
 }
 function handleRootPointermove(e) {
-  if (!state.pointerDown) return;
+  if (!state.pointerDown || !state.pointerDown.validated) return;
   const config = state.pointerDown.parent.data.config;
   if (!isSynthDragState(state) && (touchDevice || !touchDevice && !config.nativeDrag)) {
     pd(e);
@@ -1584,7 +1588,8 @@ function setup(parent, parentData) {
             node: {
               el: draggableItem,
               data: nodeData
-            }
+            },
+            validated: true
           };
           draggableItem.draggable = true;
         }
@@ -1855,7 +1860,8 @@ function handleNodePointerdown(data, state2) {
   sp(data.e);
   state2.pointerDown = {
     parent: data.targetData.parent,
-    node: data.targetData.node
+    node: data.targetData.node,
+    validated: false
   };
   if (!validateDragHandle({
     x: data.e.clientX,
@@ -1864,6 +1870,11 @@ function handleNodePointerdown(data, state2) {
     config: data.targetData.parent.data.config
   }))
     return;
+  state2.pointerDown = {
+    parent: data.targetData.parent,
+    node: data.targetData.node,
+    validated: true
+  };
   handleLongPress(data, state2, data.targetData.node);
   const parentData = data.targetData.parent.data;
   let selectedNodes = [data.targetData.node];

dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formkit/drag-and-drop",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Drag and drop package.",
   "main": "./index.cjs",
   "types": "./index.d.cts",

dist/react/index.d.cts

@@ -596,6 +596,7 @@ type BaseDragState<T> = {
     pointerDown: {
         parent: ParentRecord<T>;
         node: NodeRecord<T>;
+        validated: boolean;
     } | undefined;
     /**
      * The original z-index of the dragged node.

dist/react/index.d.ts

@@ -596,6 +596,7 @@ type BaseDragState<T> = {
     pointerDown: {
         parent: ParentRecord<T>;
         node: NodeRecord<T>;
+        validated: boolean;
     } | undefined;
     /**
      * The original z-index of the dragged node.

dist/vue/index.d.cts

@@ -596,6 +596,7 @@ type BaseDragState<T> = {
     pointerDown: {
         parent: ParentRecord<T>;
         node: NodeRecord<T>;
+        validated: boolean;
     } | undefined;
     /**
      * The original z-index of the dragged node.

dist/vue/index.d.ts

@@ -596,6 +596,7 @@ type BaseDragState<T> = {
     pointerDown: {
         parent: ParentRecord<T>;
         node: NodeRecord<T>;
+        validated: boolean;
     } | undefined;
     /**
      * The original z-index of the dragged node.

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.3",
+  "version": "0.3.4",
   "private": true,
   "description": "Drag and drop package.",
   "main": "./index.cjs",

playwright/tests/drag/draghandle.spec.ts

@@ -0,0 +1,30 @@
+import { test, expect, Page } from "@playwright/test";
+import { drag } from "../../utils";
+
+let page: Page;
+
+test.beforeEach(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.describe("Native drag with drag handles", async () => {
+  test("Native drag with drag handles. Should not be able to pick up item unless using drag handle", async () => {
+    await page.goto("http://localhost:3001/draghandle");
+    await new Promise((r) => setTimeout(r, 1000));
+    // Should not be able to pick up item unless using drag handle
+    await drag(page, {
+      originEl: { id: "Apple", position: "center" },
+      destinationEl: { id: "Banana", position: "center" },
+      dragStart: true,
+    });
+    await expect(page.locator("#values_1")).toHaveText("Apple Banana Orange");
+    // When using drag handle, should be able to pick up item and see dragging
+    // class.
+    await drag(page, {
+      originEl: { id: "Apple_dragHandle", position: "center" },
+      destinationEl: { id: "Banana", position: "center" },
+      dragStart: true,
+    });
+    await expect(page.locator("#values_1")).toHaveText("Banana Apple Orange");
+  });
+});

playwright/tests/drag/issue-133.spec.ts

@@ -0,0 +1,53 @@
+import { test, expect, Page } from "@playwright/test";
+import { drag } from "../../utils";
+
+let page: Page;
+
+test.beforeEach(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.describe("Issue #133", async () => {
+  test("When an element is transferred to another list, and then moved back to the root and dropped, `config.handlEnd` should still be invoked.", async () => {
+    await page.goto("http://localhost:3001/issue-133");
+    await new Promise((r) => setTimeout(r, 1000));
+    await expect(
+      page.locator("body").getAttribute("data-target-dragend")
+    ).resolves.toBe(null);
+    // Should not be able to pick up item unless using drag handle
+    await drag(page, {
+      originEl: { id: "Apple", position: "center" },
+      destinationEl: { id: "Apple", position: "center" },
+      dragStart: true,
+      drop: false,
+    });
+    await expect(
+      page.locator("body").getAttribute("data-target-dragend")
+    ).resolves.toBe(null);
+    // When using drag handle, should be able to pick up item and see dragging
+    // class.
+    await drag(page, {
+      originEl: { id: "Apple", position: "center" },
+      destinationEl: { id: "Pineapple", position: "center" },
+    });
+
+    await expect(page.locator("#values_1")).toHaveText(
+      "Banana Orange Cherry Grape"
+    );
+    await expect(page.locator("#values_2")).toHaveText(
+      "Apple Pineapple Strawberry"
+    );
+
+    await drag(page, {
+      originEl: { id: "Apple", position: "center" },
+      destinationEl: { id: "issue-133-title", position: "center" },
+      drop: true,
+    });
+
+    await new Promise((r) => setTimeout(r, 1000));
+
+    await expect(
+      page.locator("body").getAttribute("data-source-dragend")
+    ).resolves.toBe("true");
+  });
+});

playwright/tests/synthetic-drag/draghandle.spec.ts

@@ -0,0 +1,30 @@
+import { test, expect, Page } from "@playwright/test";
+import { syntheticDrag } from "../../utils";
+
+let page: Page;
+
+test.beforeEach(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.describe("Synth Drag handles", async () => {
+  test("Test #1: Elements can only be picked up by the drag handle.", async () => {
+    await page.goto("http://localhost:3001/draghandle");
+    await new Promise((r) => setTimeout(r, 1000));
+    // Should not be able to pick up item unless using drag handle
+    await syntheticDrag(page, {
+      originEl: { id: "Apple", position: "center" },
+      destinationEl: { id: "Banana", position: "center" },
+      dragStart: true,
+    });
+    await expect(page.locator("#values_1")).toHaveText("Apple Banana Orange");
+    // When using drag handle, should be able to pick up item and see dragging
+    // class.
+    await syntheticDrag(page, {
+      originEl: { id: "Apple_dragHandle", position: "center" },
+      destinationEl: { id: "Banana", position: "center" },
+      dragStart: true,
+    });
+    await expect(page.locator("#values_1")).toHaveText("Banana Apple Orange");
+  });
+});

src/index.ts

@@ -241,7 +241,15 @@ function handleRootKeydown(e: KeyboardEvent) {
   }
 }
 
-function handleRootDrop(_e: DragEvent) {}
+function handleRootDrop(_e: DragEvent) {
+  if (!isDragState(state)) return;
+
+  dropped = true;
+
+  const handleEnd = state.initialParent.data.config.handleEnd;
+
+  handleEnd(state);
+}
 
 /**
  * If we are currently dragging, then let's prevent default on dragover to avoid
@@ -254,7 +262,7 @@ function handleRootDragover(e: DragEvent) {
 }
 
 function handleRootPointermove(e: PointerEvent) {
-  if (!state.pointerDown) return;
+  if (!state.pointerDown || !state.pointerDown.validated) return;
 
   const config = state.pointerDown.parent.data.config;
 
@@ -1029,6 +1037,7 @@ function setup<T>(parent: HTMLElement, parentData: ParentData<T>): void {
               el: draggableItem,
               data: nodeData,
             },
+            validated: true,
           };
 
           draggableItem.draggable = true;
@@ -1508,6 +1517,7 @@ export function handleNodePointerdown<T>(
   state.pointerDown = {
     parent: data.targetData.parent,
     node: data.targetData.node,
+    validated: false,
   };
 
   if (
@@ -1520,6 +1530,12 @@ export function handleNodePointerdown<T>(
   )
     return;
 
+  state.pointerDown = {
+    parent: data.targetData.parent,
+    node: data.targetData.node,
+    validated: true,
+  };
+
   handleLongPress(data, state, data.targetData.node);
 
   const parentData = data.targetData.parent.data;
@@ -2017,6 +2033,7 @@ export function handlePointercancel<T>(
   state: DragState<T> | SynthDragState<T> | BaseDragState<T>
 ) {
   if (!isSynthDragState(state)) return;
+
   pd(data.e);
 
   if (dropped) {

src/types.ts

@@ -789,6 +789,7 @@ export type BaseDragState<T> = {
     | {
         parent: ParentRecord<T>;
         node: NodeRecord<T>;
+        validated: boolean;
       }
     | undefined;
   /**