@havue/drag-and-drop 1.1.0 → 1.1.2

package/dist/drag-and-drop.mjs

@@ -2,8 +2,8 @@ import './style.css';
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { defineComponent, ref, reactive, computed, createElementBlock, openBlock, normalizeClass, renderSlot, createCommentVNode, normalizeStyle } from "vue";
-import { EventBus, isMobile } from "@havue/shared";
+import { defineComponent, ref, reactive, computed, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeClass, renderSlot, createCommentVNode, normalizeStyle } from "vue";
+import { EventBus } from "@havue/shared";
 const withInstall = (main, extra) => {
   main.install = (app) => {
     for (const comp of [main, ...Object.values({})]) {
@@ -217,15 +217,12 @@ class DnDManager extends EventBus {
       const onMouseDown = this.onMouseDown.bind(this);
       const onMouseMove = this.onMouseMove.bind(this);
       const onMouseUp = this.onMouseUp.bind(this);
-      if (isMobile) {
-        document.body.addEventListener("touchstart", onTouchStart, { passive: false });
-        document.body.addEventListener("touchmove", onTouchMove, { passive: false });
-        document.body.addEventListener("touchend", onTouchEnd, { passive: false });
-      } else {
-        document.body.addEventListener("mousedown", onMouseDown);
-        document.body.addEventListener("mousemove", onMouseMove);
-        document.body.addEventListener("mouseup", onMouseUp);
-      }
+      document.body.addEventListener("touchstart", onTouchStart, { passive: false });
+      document.body.addEventListener("touchmove", onTouchMove, { passive: false });
+      document.body.addEventListener("touchend", onTouchEnd, { passive: false });
+      document.body.addEventListener("mousedown", onMouseDown);
+      document.body.addEventListener("mousemove", onMouseMove);
+      document.body.addEventListener("mouseup", onMouseUp);
       this.destroy = () => {
         document.body.removeEventListener("touchstart", onTouchStart);
         document.body.removeEventListener("touchmove", onTouchMove);
@@ -291,7 +288,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         transform: `translate(${cloneNodePosition.x}px, ${cloneNodePosition.y}px) translate(-50%, -50%)`
       };
     });
-    DnDManagerInstance.on("down", (params) => {
+    const onDown = (params) => {
       const { x, y } = params;
       const startEl = document.elementFromPoint(x, y);
       if (!props.disabled && dragItemRef.value && dragItemRef.value.contains(startEl)) {
@@ -303,8 +300,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         downPosition.x = x;
         downPosition.y = y;
       }
-    });
-    DnDManagerInstance.on("first-move", (params, event) => {
+    };
+    const onFirstMove = (params, event) => {
       const { x, y } = params;
       const directions = immediateDirections.value.filter((item) => item !== ImmediateEnumType.ALL);
       if (isDownThis.value && !props.disabled && directions.length) {
@@ -330,21 +327,21 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           return;
         }
       }
-    });
-    DnDManagerInstance.on("start", (params) => {
+    };
+    const onStart = (params) => {
       const { x, y } = params;
       const startEl = document.elementFromPoint(x, y);
       if (!props.disabled && dragItemRef.value && dragItemRef.value.contains(startEl)) {
         handleStart(params);
       }
-    });
-    DnDManagerInstance.on("move", (params) => {
+    };
+    const onMove = (params) => {
       const { point } = params;
       if (isDragThis.value) {
         handleMove(point);
       }
-    });
-    DnDManagerInstance.on("end", () => {
+    };
+    const onEnd = () => {
       isDownThis.value = false;
       isDragThis.value = false;
       Object.assign(downPosition, {
@@ -355,7 +352,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         x: 0,
         y: 0
       });
-    });
+    };
     function handleStart(point) {
       isDragThis.value = true;
       cloneNodePosition.x = point.x;
@@ -366,6 +363,20 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       cloneNodePosition.x = point.x;
       cloneNodePosition.y = point.y;
     }
+    onMounted(() => {
+      DnDManagerInstance.on("down", onDown);
+      DnDManagerInstance.on("first-move", onFirstMove);
+      DnDManagerInstance.on("start", onStart);
+      DnDManagerInstance.on("move", onMove);
+      DnDManagerInstance.on("end", onEnd);
+    });
+    onBeforeUnmount(() => {
+      DnDManagerInstance.off("down", onDown);
+      DnDManagerInstance.off("first-move", onFirstMove);
+      DnDManagerInstance.off("start", onStart);
+      DnDManagerInstance.off("move", onMove);
+      DnDManagerInstance.off("end", onEnd);
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         ref_key: "dragItemRef",
@@ -393,7 +404,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const Draggable = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-33722ba1"]]);
+const Draggable = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-21a10de6"]]);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "HvDroppable"
@@ -433,7 +444,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       };
     }
-    DnDManagerInstance.on("move", (params) => {
+    const onMove = (params) => {
       const { type, data, point } = params;
       if (dropAreaRef.value && acceptDragTypeList.value.includes(type)) {
         const { isInArea, position } = getPositionInArea(point);
@@ -449,12 +460,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           emits("leave", type, data);
         }
       }
-    });
-    DnDManagerInstance.on("end", ({ type, point, data }) => {
+    };
+    const onEnd = ({ type, point, data }) => {
       if (dropAreaRef.value && acceptDragTypeList.value.includes(type) && isEntered.value) {
         const { position } = getPositionInArea(point);
         emits("drop", type, position, data);
       }
+    };
+    onMounted(() => {
+      DnDManagerInstance.on("move", onMove);
+      DnDManagerInstance.on("end", onEnd);
+    });
+    onBeforeUnmount(() => {
+      DnDManagerInstance.off("move", onMove);
+      DnDManagerInstance.off("end", onEnd);
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {

package/dist/drag-and-drop.umd.js

@@ -218,15 +218,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         const onMouseDown = this.onMouseDown.bind(this);
         const onMouseMove = this.onMouseMove.bind(this);
         const onMouseUp = this.onMouseUp.bind(this);
-        if (shared.isMobile) {
-          document.body.addEventListener("touchstart", onTouchStart, { passive: false });
-          document.body.addEventListener("touchmove", onTouchMove, { passive: false });
-          document.body.addEventListener("touchend", onTouchEnd, { passive: false });
-        } else {
-          document.body.addEventListener("mousedown", onMouseDown);
-          document.body.addEventListener("mousemove", onMouseMove);
-          document.body.addEventListener("mouseup", onMouseUp);
-        }
+        document.body.addEventListener("touchstart", onTouchStart, { passive: false });
+        document.body.addEventListener("touchmove", onTouchMove, { passive: false });
+        document.body.addEventListener("touchend", onTouchEnd, { passive: false });
+        document.body.addEventListener("mousedown", onMouseDown);
+        document.body.addEventListener("mousemove", onMouseMove);
+        document.body.addEventListener("mouseup", onMouseUp);
         this.destroy = () => {
           document.body.removeEventListener("touchstart", onTouchStart);
           document.body.removeEventListener("touchmove", onTouchMove);
@@ -292,7 +289,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           transform: `translate(${cloneNodePosition.x}px, ${cloneNodePosition.y}px) translate(-50%, -50%)`
         };
       });
-      DnDManagerInstance.on("down", (params) => {
+      const onDown = (params) => {
         const { x, y } = params;
         const startEl = document.elementFromPoint(x, y);
         if (!props.disabled && dragItemRef.value && dragItemRef.value.contains(startEl)) {
@@ -304,8 +301,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           downPosition.x = x;
           downPosition.y = y;
         }
-      });
-      DnDManagerInstance.on("first-move", (params, event) => {
+      };
+      const onFirstMove = (params, event) => {
         const { x, y } = params;
         const directions = immediateDirections.value.filter((item) => item !== ImmediateEnumType.ALL);
         if (isDownThis.value && !props.disabled && directions.length) {
@@ -331,21 +328,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             return;
           }
         }
-      });
-      DnDManagerInstance.on("start", (params) => {
+      };
+      const onStart = (params) => {
         const { x, y } = params;
         const startEl = document.elementFromPoint(x, y);
         if (!props.disabled && dragItemRef.value && dragItemRef.value.contains(startEl)) {
           handleStart(params);
         }
-      });
-      DnDManagerInstance.on("move", (params) => {
+      };
+      const onMove = (params) => {
         const { point } = params;
         if (isDragThis.value) {
           handleMove(point);
         }
-      });
-      DnDManagerInstance.on("end", () => {
+      };
+      const onEnd = () => {
         isDownThis.value = false;
         isDragThis.value = false;
         Object.assign(downPosition, {
@@ -356,7 +353,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           x: 0,
           y: 0
         });
-      });
+      };
       function handleStart(point) {
         isDragThis.value = true;
         cloneNodePosition.x = point.x;
@@ -367,6 +364,20 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         cloneNodePosition.x = point.x;
         cloneNodePosition.y = point.y;
       }
+      vue.onMounted(() => {
+        DnDManagerInstance.on("down", onDown);
+        DnDManagerInstance.on("first-move", onFirstMove);
+        DnDManagerInstance.on("start", onStart);
+        DnDManagerInstance.on("move", onMove);
+        DnDManagerInstance.on("end", onEnd);
+      });
+      vue.onBeforeUnmount(() => {
+        DnDManagerInstance.off("down", onDown);
+        DnDManagerInstance.off("first-move", onFirstMove);
+        DnDManagerInstance.off("start", onStart);
+        DnDManagerInstance.off("move", onMove);
+        DnDManagerInstance.off("end", onEnd);
+      });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           ref_key: "dragItemRef",
@@ -394,7 +405,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
     return target;
   };
-  const Draggable = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-33722ba1"]]);
+  const Draggable = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-21a10de6"]]);
   const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "HvDroppable"
@@ -434,7 +445,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           }
         };
       }
-      DnDManagerInstance.on("move", (params) => {
+      const onMove = (params) => {
         const { type, data, point } = params;
         if (dropAreaRef.value && acceptDragTypeList.value.includes(type)) {
           const { isInArea, position } = getPositionInArea(point);
@@ -450,12 +461,20 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             emits("leave", type, data);
           }
         }
-      });
-      DnDManagerInstance.on("end", ({ type, point, data }) => {
+      };
+      const onEnd = ({ type, point, data }) => {
         if (dropAreaRef.value && acceptDragTypeList.value.includes(type) && isEntered.value) {
           const { position } = getPositionInArea(point);
           emits("drop", type, position, data);
         }
+      };
+      vue.onMounted(() => {
+        DnDManagerInstance.on("move", onMove);
+        DnDManagerInstance.on("end", onEnd);
+      });
+      vue.onBeforeUnmount(() => {
+        DnDManagerInstance.off("move", onMove);
+        DnDManagerInstance.off("end", onEnd);
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {

package/dist/style.css

@@ -1,11 +1,11 @@
-.hv-draggable[data-v-33722ba1] {
+.hv-draggable[data-v-21a10de6] {
   width: fit-content;
   cursor: grab;
 }
-.hv-draggable.disabled[data-v-33722ba1] {
+.hv-draggable.disabled[data-v-21a10de6] {
   cursor: not-allowed;
 }
-.hv-draggable__clone-item[data-v-33722ba1] {
+.hv-draggable__clone-item[data-v-21a10de6] {
   position: fixed;
   top: 0;
   left: 0;

package/dist/types/src/manager/index.d.ts

@@ -4,7 +4,7 @@ export type DragAndDropPoint = {
     y: number;
 };
 export type DragAndDropDragType = string | number | symbol;
-type Events = {
+export type DnDManagerEvents = {
     down: (p: DragAndDropPoint) => void;
     'first-move': (p: DragAndDropPoint, e: MouseEvent | TouchEvent) => void;
     start: (p: DragAndDropPoint) => void;
@@ -19,7 +19,7 @@ type Events = {
         point: DragAndDropPoint;
     }) => void;
 };
-export declare class DnDManager extends EventBus<Events> {
+export declare class DnDManager extends EventBus<DnDManagerEvents> {
     /** 是否开始拖动 */
     isDragStart: boolean;
     /** 拖动元素类型 */
@@ -78,4 +78,3 @@ export declare class DnDManager extends EventBus<Events> {
     destroyed(): void;
 }
 export declare const DnDManagerInstance: DnDManager;
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@havue/drag-and-drop",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Drag and drop components for Vue3",
   "keywords": [
     "havue",
@@ -16,7 +16,7 @@
     "url": "git+https://github.com/HappyPedestrian/havue.git"
   },
   "dependencies": {
-    "@havue/shared": "^1.1.0"
+    "@havue/shared": "^1.1.2"
   },
   "devDependencies": {
     "vue": "^3.3.0"