place plugin now works with multi drag, adds test for it

playwright/tests/drag/multi-drag.spec.ts

@@ -46,7 +46,7 @@ test.describe("Multi drag sorting", async () => {
     );
   });
 
-  test("Select two, drag both", async () => {
+  test.only("Select two, drag both", async () => {
     await page.goto("http://localhost:3001/multi-drag");
     await new Promise((r) => setTimeout(r, 1000));
     await page.click("#Apple");

playwright/tests/drag/place-multi-drag.spec.ts

@@ -0,0 +1,37 @@
+import { test, expect, Page } from "@playwright/test";
+import { drag } from "../../utils";
+
+let page: Page;
+
+let count: number;
+
+test.beforeEach(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.describe("Place plugin with multi drag", async () => {
+  test("Test #1", async () => {
+    await page.goto("http://localhost:3001/place/multi-drag");
+    await new Promise((r) => setTimeout(r, 1000));
+
+    await page.locator("#Apple").click();
+    await expect(page.locator("#Apple")).toHaveClass("item selected");
+    await page.locator("#Banana").click({
+      modifiers: ["Shift"],
+    });
+    await expect(page.locator("#Apple")).toHaveClass("item selected");
+    await expect(page.locator("#Banana")).toHaveClass("item selected");
+
+    await drag(page, {
+      originEl: { id: "Apple", position: "center" },
+      destinationEl: { id: "Onion", position: "center" },
+      dragStart: true,
+      drop: true,
+    });
+
+    await expect(page.locator("#values_1")).toHaveText("Orange");
+    await expect(page.locator("#values_2")).toHaveText(
+      "Tomato Potato Apple Banana Onion"
+    );
+  });
+});

src/index.ts

@@ -1244,8 +1244,6 @@ export function handleNodePointerdown<T>(
   data: NodePointerEventData<T>,
   state: BaseDragState<T>
 ) {
-  console.log("pointerdown", synthNodePointerDown);
-
   if (!validateDragHandle(data)) return;
 
   data.e.stopPropagation();

src/plugins/place/index.ts

@@ -236,6 +236,8 @@ function handleEnd<T>(state: DragState<T> | SynthDragState<T>) {
     ? newValues.splice(index, 0, ...draggedValues)
     : newValues.push(...draggedValues);
 
+  console.log("index", index);
+
   if (state.initialParent.el !== state.currentParent.el) {
     const initialParentValues = parentValues(
       state.initialParent.el,
@@ -245,12 +247,17 @@ function handleEnd<T>(state: DragState<T> | SynthDragState<T>) {
     const newInitialValues = initialParentValues.filter(
       (x) => !draggedValues.includes(x)
     );
-
     setParentValues(
       state.initialParent.el,
       state.initialParent.data,
       newInitialValues
     );
+
+    setParentValues(
+      state.currentParent.el,
+      state.currentParent.data,
+      newValues
+    );
   } else if (
     state.initialParent.el === state.currentParent.el &&
     placeState.draggedOverNodes.length

tests/pages/multi-drag/index.vue

@@ -5,6 +5,7 @@ const [parent, values] = useDragAndDrop(["Apple", "Banana", "Orange"], {
   draggingClass: "blue",
   dropZoneClass: "dropZoneClass",
   multiDrag: true,
+  selectedClass: "selected",
 });
 </script>
 
@@ -26,6 +27,11 @@ const [parent, values] = useDragAndDrop(["Apple", "Banana", "Orange"], {
 </template>
 
 <style scoped>
+.selected {
+  background-color: yellow !important;
+  color: black !important;
+}
+
 .dropZoneClass {
   background-color: green !important;
   color: white !important;

tests/pages/place/multi-drag.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { useDragAndDrop } from "../../../src/vue/index";
+import { place } from "../../../src/index";
+
+const [parent1, values1] = useDragAndDrop(["Apple", "Banana", "Orange"], {
+  plugins: [place()],
+  dropZoneClass: "dropZone",
+  group: "transfer",
+  dragPlaceholderClass: "dragPlaceholder",
+  dropZoneParentClass: "dropZoneParent",
+  synthDropZoneParentClass: "synthDropZoneParent",
+  synthDropZoneClass: "synthDropZone",
+  synthDragPlaceholderClass: "synthDragPlaceholder",
+  selectedClass: "selected",
+  draggable: (el) => {
+    return el.tagName === "LI";
+  },
+  multiDrag: true,
+});
+
+const [parent2, values2] = useDragAndDrop(["Tomato", "Potato", "Onion"], {
+  plugins: [place()],
+  dropZoneClass: "dropZone",
+  group: "transfer",
+  dragPlaceholderClass: "dragPlaceholder",
+  dropZoneParentClass: "dropZoneParent",
+  synthDropZoneParentClass: "synthDropZoneParent",
+  synthDropZoneClass: "synthDropZone",
+  synthDragPlaceholderClass: "synthDragPlaceholder",
+  selectedClass: "selected",
+  draggable: (el) => {
+    return el.tagName === "LI";
+  },
+  multiDrag: true,
+});
+</script>
+
+<template>
+  <h2 id="title">Place Plugin</h2>
+  <div class="flex-wrap">
+    <div class="container">
+      <h4>List 1</h4>
+      <ul id="list_1" ref="parent1" class="list">
+        <li v-for="value in values1" :id="value" :key="value" class="item">
+          {{ value }}
+        </li>
+        <div class="values">
+          Values:
+          <span id="values_1">
+            {{ values1.map((x) => x).join(" ") }}
+          </span>
+        </div>
+      </ul>
+    </div>
+    <div>
+      <div class="container">
+        <h4>List 2</h4>
+        <ul id="list_2" ref="parent2" class="list">
+          <li v-for="value in values2" :id="value" :key="value" class="item">
+            {{ value }}
+          </li>
+          <div class="values">
+            Values:
+            <span id="values_2">
+              {{ values2.map((x) => x).join(" ") }}
+            </span>
+          </div>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.selected {
+  background-color: yellow !important;
+  color: black !important;
+}
+.dropZoneParent,
+.synthDropZoneParent {
+  border: 1px solid purple !important;
+}
+
+.dropZone,
+.synthDropZone {
+  background-color: teal !important;
+}
+
+.dragPlaceholder,
+.synthDragPlaceholder {
+  opacity: 0.5;
+}
+
+.item {
+  width: 200px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  margin: 5px 0;
+  list-style-type: none;
+}
+
+.list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  margin-bottom: 2em;
+  display: flex;
+  flex-direction: column;
+}
+
+.item {
+  padding: 10px;
+  margin: 5px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  text-align: center;
+  background-color: #f9f9f9;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s;
+  width: 400px;
+  height: 50px;
+}
+
+h1 {
+  font-size: 1.5em;
+  margin-bottom: 2em;
+}
+
+h2 {
+  font-size: 1em;
+  margin-bottom: 1em;
+}
+
+p {
+  margin-bottom: 2em;
+  /* font-size: 0.9em; */
+}
+
+.divider {
+  margin: 5em 0;
+  border-bottom: 1px solid #ccc;
+}
+</style>