fix: exports multidrag dragstart function, fixes types definitions in…

… docs and config

docs/examples/multi-drag-config/multi-drag-config.ts

@@ -5,7 +5,6 @@ import type {
 } from "@formkit/drag-and-drop";
 
 export interface MultiDragConfig<T> {
-  [key: string]: any;
   /**
    * Class added when a node is being dragged.
    */
@@ -30,15 +29,18 @@ export interface MultiDragConfig<T> {
   /**
    * Function that is called when dragend event occurrs event occurs.
    */
-  handleDragend: NodeDragEventData<T> | NodeTouchEventData<T>;
+  multiHandleEnd: (data: NodeDragEventData<T> | NodeTouchEventData<T>) => void;
   /**
    * Function that is called when dragstart occurs.
    */
-  handleDragstart: NodeDragEventData<T>;
+  multiHandleDragstart: (data: NodeDragEventData<T>) => void;
   /**
    * Function that is called when dragstart event occurs.
    */
-  handleTouchstart: NodeTouchEventData<T>;
+  multiHandleTouchstart: (data: NodeTouchEventData<T>) => void;
+  multiReapplyDragClasses: (
+    data: NodeDragEventData<T> | NodeTouchEventData<T>
+  ) => void;
   /**
    * An array of functions to use for a given parent.
    */

src/plugins/multiDrag/index.ts

@@ -173,7 +173,7 @@ function multiHandleDragstart<T>(data: NodeEventData<T>) {
   });
 }
 
-function dragstart<T>(data: NodeDragEventData<T>) {
+export function dragstart<T>(data: NodeDragEventData<T>) {
   const dragState = initDrag(data);
 
   multiDragState.isTouch = false;

src/plugins/multiDrag/types.ts

@@ -6,7 +6,6 @@ import {
   NodeTouchEventData,
 } from "../../types";
 export interface MultiDragConfig<T> {
-  [key: string]: any;
   /**
    * Class added when a node is being dragged.
    */
@@ -31,15 +30,18 @@ export interface MultiDragConfig<T> {
   /**
    * Function that is called when dragend event occurrs event occurs.
    */
-  handleEnd: (data: NodeDragEventData<T> | NodeTouchEventData<T>) => void;
+  multiHandleEnd: (data: NodeDragEventData<T> | NodeTouchEventData<T>) => void;
   /**
    * Function that is called when dragstart occurs.
    */
-  handleDragstart: (data: NodeDragEventData<T>) => void;
+  multiHandleDragstart: (data: NodeDragEventData<T>) => void;
   /**
    * Function that is called when dragstart event occurs.
    */
-  handleTouchstart: (data: NodeTouchEventData<T>) => void;
+  multiHandleTouchstart: (data: NodeTouchEventData<T>) => void;
+  multiReapplyDragClasses: (
+    data: NodeDragEventData<T> | NodeTouchEventData<T>
+  ) => void;
   /**
    * An array of functions to use for a given parent.
    */

tests/pages/multi-drag/index.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { useDragAndDrop } from "../../../src/vue/index";
+import { multiDrag, selections } from "../../../src/index";
+import { multiDragState, dragstart } from "../../../src/plugins/multiDrag";
+
+const [parent, values] = useDragAndDrop(
+  ["Apple", "Banana", "Orange", "Strawberry", "Pineapple", "Grapes"],
+  {
+    plugins: [
+      multiDrag({
+        plugins: [selections()],
+        multiHandleDragstart: (data) => {
+          const otherEls = data.targetData.parent.data.enabledNodes.map(
+            (x) => x
+          );
+          multiDragState.selectedNodes.push(...otherEls);
+          dragstart(data);
+        },
+      }),
+    ],
+  }
+);
+</script>
+
+<template>
+  <h2>Place Plugin</h2>
+  <div>
+    <ul ref="parent" class="list">
+      <li v-for="value in values" :id="value" :key="value" class="item">
+        {{ value }}
+      </li>
+    </ul>
+    <div class="values">
+      Values:
+      <span id="sort_values">
+        {{ values.map((x) => x).join(" ") }}
+      </span>
+    </div>
+  </div>
+  <div id="randomElement">Random element</div>
+</template>
+
+<style scoped>
+.item {
+  padding: 10px;
+  border: 1px solid #ccc;
+  margin: 5px 0;
+  list-style-type: none;
+}
+
+.item.hover {
+  position: relative;
+}
+
+.item.hover::before {
+  content: "";
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: green;
+}
+
+.list {
+  list-style-type: none;
+  width: 1400px;
+  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>