@havue/drag-and-drop 1.0.0

package/README.md

@@ -0,0 +1,3 @@
+# DragAndDrop
+
+[documents](https://happypedestrian.github.io/havue/components/drag-and-drop.html)

package/dist/drag-and-drop.mjs

@@ -0,0 +1,476 @@
+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";
+const withInstall = (main, extra) => {
+  main.install = (app) => {
+    for (const comp of [main, ...Object.values({})]) {
+      app.component(comp.name, comp);
+    }
+  };
+  return main;
+};
+class DnDManager extends EventBus {
+  constructor() {
+    super();
+    /** 是否开始拖动 */
+    __publicField(this, "isDragStart", false);
+    /** 拖动元素类型 */
+    __publicField(this, "dragType");
+    /** Draggable传递的数据，
+     * 供Droppable使用
+     */
+    __publicField(this, "dragData");
+    __publicField(this, "isSendFirstMovePos", false);
+    /** 移动端长按一定时间才触发 onStart */
+    __publicField(this, "touchStartPressTime", 300);
+    /** touchstart事件触发的时的时间 */
+    __publicField(this, "touchStartTime", 0);
+    /** touchstart时间触发的位置 */
+    __publicField(this, "touchStartPosition", { x: 0, y: 0 });
+    /** onMove最后位置 */
+    __publicField(this, "lastMovePoint", { x: 0, y: 0 });
+    __publicField(this, "emitTouchStartTimer");
+    __publicField(this, "destroy", () => {
+    });
+    this.bindEventListener();
+  }
+  updateDargInfo(type, data) {
+    if (type === void 0 || type === null) {
+      throw new Error("请传入拖动元素 type");
+    }
+    this.isDragStart = true;
+    this.dragType = type;
+    this.dragData = data;
+    this.emitTouchStartTimer && clearTimeout(this.emitTouchStartTimer);
+    this.emitTouchStartTimer = void 0;
+  }
+  /**
+   * 通知 Draggable 开始点击
+   * @param point
+   */
+  onDown(point) {
+    this.emit("down", point);
+  }
+  /**
+   * 通知 Draggable 拖拽开始
+   * @param point
+   */
+  onFirstMove(point, e) {
+    if (this.isDragStart) {
+      return;
+    }
+    this.isSendFirstMovePos = true;
+    this.emit("first-move", point, e);
+  }
+  /**
+   * 通知 Draggable 拖拽开始
+   * @param point
+   */
+  onStart(point) {
+    if (this.isDragStart) {
+      return;
+    }
+    this.emit("start", point);
+  }
+  /**
+   * 通知 Draggable 移动
+   * @param point
+   * @returns
+   */
+  onMove(point) {
+    if (!this.isDragStart || !this.dragType) {
+      return;
+    }
+    this.lastMovePoint = point;
+    this.emit("move", {
+      type: this.dragType,
+      data: this.dragData,
+      point
+    });
+  }
+  /**
+   * 结束拖拽
+   * @returns
+   */
+  onEnd() {
+    this.emitTouchStartTimer && clearTimeout(this.emitTouchStartTimer);
+    this.emitTouchStartTimer = void 0;
+    this.isSendFirstMovePos = false;
+    if (!this.isDragStart || !this.dragType) {
+      return;
+    }
+    this.isDragStart = false;
+    this.emit("end", {
+      point: this.lastMovePoint,
+      type: this.dragType,
+      data: this.dragData
+    });
+  }
+  onMouseDown(e) {
+    if (e.buttons !== 1) {
+      this.onEnd();
+      return;
+    }
+    const { clientX, clientY } = e;
+    const position = {
+      x: clientX,
+      y: clientY
+    };
+    this.touchStartTime = Date.now();
+    this.touchStartPosition = position;
+    this.emitTouchStartTimer && clearTimeout(this.emitTouchStartTimer);
+    this.onDown(position);
+    this.emitTouchStartTimer = window.setTimeout(() => {
+      this.onStart(position);
+    }, this.touchStartPressTime);
+  }
+  onMouseMove(e) {
+    if (e.buttons !== 1) {
+      this.onEnd();
+      return;
+    }
+    const { clientX, clientY } = e;
+    if (this.isDragStart) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.onMove({
+        x: clientX,
+        y: clientY
+      });
+    } else {
+      if (!this.isSendFirstMovePos) {
+        this.onFirstMove(
+          {
+            x: clientX,
+            y: clientY
+          },
+          e
+        );
+      }
+      const { x, y } = this.touchStartPosition;
+      const timeInLimit = Date.now() - this.touchStartTime < this.touchStartPressTime;
+      if (timeInLimit && (Math.abs(x - clientX) > 30 || Math.abs(y - clientY) > 30)) {
+        clearTimeout(this.emitTouchStartTimer);
+        this.emitTouchStartTimer = void 0;
+      }
+    }
+  }
+  onMouseUp() {
+    this.onEnd();
+  }
+  onTouchStart(e) {
+    if (e.touches.length > 1) {
+      return;
+    }
+    const { clientX, clientY } = e.touches[0];
+    const position = {
+      x: clientX,
+      y: clientY
+    };
+    this.touchStartTime = Date.now();
+    this.touchStartPosition = position;
+    this.onDown(position);
+    this.emitTouchStartTimer = window.setTimeout(() => {
+      this.onStart(position);
+    }, this.touchStartPressTime);
+  }
+  onTouchMove(e) {
+    if (e.touches.length > 1) {
+      return;
+    }
+    const { clientX, clientY } = e.touches[0];
+    if (this.isDragStart) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.onMove({
+        x: clientX,
+        y: clientY
+      });
+    } else {
+      if (!this.isSendFirstMovePos) {
+        this.onFirstMove(
+          {
+            x: clientX,
+            y: clientY
+          },
+          e
+        );
+      }
+      const { x, y } = this.touchStartPosition;
+      const timeInLimit = Date.now() - this.touchStartTime < this.touchStartPressTime;
+      if (timeInLimit && (Math.abs(x - clientX) > 30 || Math.abs(y - clientY) > 30)) {
+        clearTimeout(this.emitTouchStartTimer);
+      }
+    }
+  }
+  onTouchEnd() {
+    this.onEnd();
+  }
+  bindEventListener() {
+    if (document.body) {
+      const onTouchStart = this.onTouchStart.bind(this);
+      const onTouchMove = this.onTouchMove.bind(this);
+      const onTouchEnd = this.onTouchEnd.bind(this);
+      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);
+      }
+      this.destroy = () => {
+        document.body.removeEventListener("touchstart", onTouchStart);
+        document.body.removeEventListener("touchmove", onTouchMove);
+        document.body.removeEventListener("touchend", onTouchEnd);
+        document.body.removeEventListener("mousedown", onMouseDown);
+        document.body.removeEventListener("mousemove", onMouseMove);
+        document.body.removeEventListener("mouseup", onMouseUp);
+      };
+    } else {
+      document.addEventListener("DOMContentLoaded", this.bindEventListener);
+    }
+  }
+  removeEventListener() {
+    this.destroy();
+  }
+  destroyed() {
+    this.isDragStart = false;
+    this.dragType = void 0;
+    this.dragData = void 0;
+    this.removeEventListener();
+  }
+}
+const DnDManagerInstance = new DnDManager();
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "HvDraggable"
+  },
+  __name: "Draggable",
+  props: {
+    type: {},
+    immediate: {},
+    disabled: { type: Boolean, default: false },
+    data: {}
+  },
+  setup(__props) {
+    const ImmediateEnumType = {
+      LEFT: "left",
+      RIGHT: "right",
+      TOP: "top",
+      BOTTOM: "bottom",
+      ALL: "all"
+    };
+    const props = __props;
+    const dragItemRef = ref();
+    const isDownThis = ref(false);
+    const downPosition = reactive({
+      x: 0,
+      y: 0
+    });
+    const isDragThis = ref(false);
+    const cloneNodePosition = reactive({
+      x: 0,
+      y: 0
+    });
+    const immediateDirections = computed(() => {
+      if (Array.isArray(props.immediate)) {
+        return props.immediate;
+      }
+      return props.immediate ? [props.immediate] : [];
+    });
+    const cloneNodeStyle = computed(() => {
+      return {
+        transform: `translate(${cloneNodePosition.x}px, ${cloneNodePosition.y}px) translate(-50%, -50%)`
+      };
+    });
+    DnDManagerInstance.on("down", (params) => {
+      const { x, y } = params;
+      const startEl = document.elementFromPoint(x, y);
+      if (!props.disabled && dragItemRef.value && dragItemRef.value.contains(startEl)) {
+        if (immediateDirections.value.includes(ImmediateEnumType.ALL)) {
+          handleStart(params);
+          return;
+        }
+        isDownThis.value = true;
+        downPosition.x = x;
+        downPosition.y = y;
+      }
+    });
+    DnDManagerInstance.on("first-move", (params, event) => {
+      const { x, y } = params;
+      const directions = immediateDirections.value.filter((item) => item !== ImmediateEnumType.ALL);
+      if (isDownThis.value && !props.disabled && directions.length) {
+        const distanceH = x - downPosition.x;
+        const distanceHAbs = Math.abs(distanceH);
+        const distanceV = y - downPosition.y;
+        const distanceVAbs = Math.abs(distanceV);
+        const max = Math.max(distanceHAbs, distanceVAbs);
+        const isMaxH = distanceHAbs === max;
+        const isMaxV = distanceVAbs === max;
+        let isImmediate = false;
+        if (isMaxH) {
+          isImmediate = directions.includes(ImmediateEnumType.LEFT) && distanceH < 0 || directions.includes(ImmediateEnumType.RIGHT) && distanceH > 0;
+        }
+        if (isMaxV && !isImmediate) {
+          isImmediate = directions.includes(ImmediateEnumType.TOP) && distanceV < 0 || directions.includes(ImmediateEnumType.BOTTOM) && distanceV > 0;
+        }
+        if (isImmediate) {
+          event.preventDefault();
+          event.stopPropagation();
+          handleStart(downPosition);
+          handleMove(params);
+          return;
+        }
+      }
+    });
+    DnDManagerInstance.on("start", (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 { point } = params;
+      if (isDragThis.value) {
+        handleMove(point);
+      }
+    });
+    DnDManagerInstance.on("end", () => {
+      isDownThis.value = false;
+      isDragThis.value = false;
+      Object.assign(downPosition, {
+        x: 0,
+        y: 0
+      });
+      Object.assign(cloneNodePosition, {
+        x: 0,
+        y: 0
+      });
+    });
+    function handleStart(point) {
+      isDragThis.value = true;
+      cloneNodePosition.x = point.x;
+      cloneNodePosition.y = point.y;
+      DnDManagerInstance.updateDargInfo(props.type, props.data);
+    }
+    function handleMove(point) {
+      cloneNodePosition.x = point.x;
+      cloneNodePosition.y = point.y;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "dragItemRef",
+        ref: dragItemRef,
+        class: normalizeClass(["draggable-area", _ctx.disabled ? "disabled" : ""])
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true),
+        isDragThis.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "draggable-clone-item",
+          style: normalizeStyle(cloneNodeStyle.value)
+        }, [
+          renderSlot(_ctx.$slots, "drag-item", {}, () => [
+            renderSlot(_ctx.$slots, "default", {}, void 0, true)
+          ], true)
+        ], 4)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const Draggable = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-34f8fce1"]]);
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "HvDroppable"
+  },
+  __name: "Droppable",
+  props: {
+    acceptDragType: {}
+  },
+  emits: ["enter", "move", "drop", "leave"],
+  setup(__props, { emit: __emit }) {
+    const emits = __emit;
+    const props = __props;
+    const dropAreaRef = ref();
+    const isEntered = ref(false);
+    const acceptDragTypeList = computed(() => {
+      return Array.isArray(props.acceptDragType) ? props.acceptDragType : [props.acceptDragType];
+    });
+    function getPositionInArea(point) {
+      if (!dropAreaRef.value) {
+        return {
+          isInArea: false,
+          position: {
+            x: 0,
+            y: 0
+          }
+        };
+      }
+      const { x: pointX, y: pointY } = point;
+      const { x, y, width, height } = dropAreaRef.value.getBoundingClientRect();
+      const posX = pointX - x;
+      const posY = pointY - y;
+      return {
+        isInArea: posX >= 0 && posX <= width && posY >= 0 && posY <= height,
+        position: {
+          x: posX,
+          y: posY
+        }
+      };
+    }
+    DnDManagerInstance.on("move", (params) => {
+      const { type, data, point } = params;
+      if (dropAreaRef.value && acceptDragTypeList.value.includes(type)) {
+        const { isInArea, position } = getPositionInArea(point);
+        if (isInArea) {
+          if (isEntered.value) {
+            emits("move", type, position, data);
+          } else {
+            isEntered.value = true;
+            emits("enter", type, position, data);
+          }
+        } else if (isEntered.value) {
+          isEntered.value = false;
+          emits("leave", type, data);
+        }
+      }
+    });
+    DnDManagerInstance.on("end", ({ type, point, data }) => {
+      if (dropAreaRef.value && acceptDragTypeList.value.includes(type) && isEntered.value) {
+        const { position } = getPositionInArea(point);
+        emits("drop", type, position, data);
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "dropAreaRef",
+        ref: dropAreaRef,
+        class: "droppable-area"
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 512);
+    };
+  }
+});
+const Droppable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-28d651f3"]]);
+const HvDraggable = withInstall(Draggable);
+const HvDroppable = withInstall(Droppable);
+export {
+  HvDraggable,
+  HvDroppable
+};

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

@@ -0,0 +1,477 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("@havue/shared")) : typeof define === "function" && define.amd ? define(["exports", "vue", "@havue/shared"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["drag-and-drop"] = {}, global.Vue, global.shared));
+})(this, function(exports2, vue, shared) {
+  "use strict";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);
+
+  const withInstall = (main, extra) => {
+    main.install = (app) => {
+      for (const comp of [main, ...Object.values({})]) {
+        app.component(comp.name, comp);
+      }
+    };
+    return main;
+  };
+  class DnDManager extends shared.EventBus {
+    constructor() {
+      super();
+      /** 是否开始拖动 */
+      __publicField(this, "isDragStart", false);
+      /** 拖动元素类型 */
+      __publicField(this, "dragType");
+      /** Draggable传递的数据，
+       * 供Droppable使用
+       */
+      __publicField(this, "dragData");
+      __publicField(this, "isSendFirstMovePos", false);
+      /** 移动端长按一定时间才触发 onStart */
+      __publicField(this, "touchStartPressTime", 300);
+      /** touchstart事件触发的时的时间 */
+      __publicField(this, "touchStartTime", 0);
+      /** touchstart时间触发的位置 */
+      __publicField(this, "touchStartPosition", { x: 0, y: 0 });
+      /** onMove最后位置 */
+      __publicField(this, "lastMovePoint", { x: 0, y: 0 });
+      __publicField(this, "emitTouchStartTimer");
+      __publicField(this, "destroy", () => {
+      });
+      this.bindEventListener();
+    }
+    updateDargInfo(type, data) {
+      if (type === void 0 || type === null) {
+        throw new Error("请传入拖动元素 type");
+      }
+      this.isDragStart = true;
+      this.dragType = type;
+      this.dragData = data;
+      this.emitTouchStartTimer && clearTimeout(this.emitTouchStartTimer);
+      this.emitTouchStartTimer = void 0;
+    }
+    /**
+     * 通知 Draggable 开始点击
+     * @param point
+     */
+    onDown(point) {
+      this.emit("down", point);
+    }
+    /**
+     * 通知 Draggable 拖拽开始
+     * @param point
+     */
+    onFirstMove(point, e) {
+      if (this.isDragStart) {
+        return;
+      }
+      this.isSendFirstMovePos = true;
+      this.emit("first-move", point, e);
+    }
+    /**
+     * 通知 Draggable 拖拽开始
+     * @param point
+     */
+    onStart(point) {
+      if (this.isDragStart) {
+        return;
+      }
+      this.emit("start", point);
+    }
+    /**
+     * 通知 Draggable 移动
+     * @param point
+     * @returns
+     */
+    onMove(point) {
+      if (!this.isDragStart || !this.dragType) {
+        return;
+      }
+      this.lastMovePoint = point;
+      this.emit("move", {
+        type: this.dragType,
+        data: this.dragData,
+        point
+      });
+    }
+    /**
+     * 结束拖拽
+     * @returns
+     */
+    onEnd() {
+      this.emitTouchStartTimer && clearTimeout(this.emitTouchStartTimer);
+      this.emitTouchStartTimer = void 0;
+      this.isSendFirstMovePos = false;
+      if (!this.isDragStart || !this.dragType) {
+        return;
+      }
+      this.isDragStart = false;
+      this.emit("end", {
+        point: this.lastMovePoint,
+        type: this.dragType,
+        data: this.dragData
+      });
+    }
+    onMouseDown(e) {
+      if (e.buttons !== 1) {
+        this.onEnd();
+        return;
+      }
+      const { clientX, clientY } = e;
+      const position = {
+        x: clientX,
+        y: clientY
+      };
+      this.touchStartTime = Date.now();
+      this.touchStartPosition = position;
+      this.emitTouchStartTimer && clearTimeout(this.emitTouchStartTimer);
+      this.onDown(position);
+      this.emitTouchStartTimer = window.setTimeout(() => {
+        this.onStart(position);
+      }, this.touchStartPressTime);
+    }
+    onMouseMove(e) {
+      if (e.buttons !== 1) {
+        this.onEnd();
+        return;
+      }
+      const { clientX, clientY } = e;
+      if (this.isDragStart) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.onMove({
+          x: clientX,
+          y: clientY
+        });
+      } else {
+        if (!this.isSendFirstMovePos) {
+          this.onFirstMove(
+            {
+              x: clientX,
+              y: clientY
+            },
+            e
+          );
+        }
+        const { x, y } = this.touchStartPosition;
+        const timeInLimit = Date.now() - this.touchStartTime < this.touchStartPressTime;
+        if (timeInLimit && (Math.abs(x - clientX) > 30 || Math.abs(y - clientY) > 30)) {
+          clearTimeout(this.emitTouchStartTimer);
+          this.emitTouchStartTimer = void 0;
+        }
+      }
+    }
+    onMouseUp() {
+      this.onEnd();
+    }
+    onTouchStart(e) {
+      if (e.touches.length > 1) {
+        return;
+      }
+      const { clientX, clientY } = e.touches[0];
+      const position = {
+        x: clientX,
+        y: clientY
+      };
+      this.touchStartTime = Date.now();
+      this.touchStartPosition = position;
+      this.onDown(position);
+      this.emitTouchStartTimer = window.setTimeout(() => {
+        this.onStart(position);
+      }, this.touchStartPressTime);
+    }
+    onTouchMove(e) {
+      if (e.touches.length > 1) {
+        return;
+      }
+      const { clientX, clientY } = e.touches[0];
+      if (this.isDragStart) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.onMove({
+          x: clientX,
+          y: clientY
+        });
+      } else {
+        if (!this.isSendFirstMovePos) {
+          this.onFirstMove(
+            {
+              x: clientX,
+              y: clientY
+            },
+            e
+          );
+        }
+        const { x, y } = this.touchStartPosition;
+        const timeInLimit = Date.now() - this.touchStartTime < this.touchStartPressTime;
+        if (timeInLimit && (Math.abs(x - clientX) > 30 || Math.abs(y - clientY) > 30)) {
+          clearTimeout(this.emitTouchStartTimer);
+        }
+      }
+    }
+    onTouchEnd() {
+      this.onEnd();
+    }
+    bindEventListener() {
+      if (document.body) {
+        const onTouchStart = this.onTouchStart.bind(this);
+        const onTouchMove = this.onTouchMove.bind(this);
+        const onTouchEnd = this.onTouchEnd.bind(this);
+        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);
+        }
+        this.destroy = () => {
+          document.body.removeEventListener("touchstart", onTouchStart);
+          document.body.removeEventListener("touchmove", onTouchMove);
+          document.body.removeEventListener("touchend", onTouchEnd);
+          document.body.removeEventListener("mousedown", onMouseDown);
+          document.body.removeEventListener("mousemove", onMouseMove);
+          document.body.removeEventListener("mouseup", onMouseUp);
+        };
+      } else {
+        document.addEventListener("DOMContentLoaded", this.bindEventListener);
+      }
+    }
+    removeEventListener() {
+      this.destroy();
+    }
+    destroyed() {
+      this.isDragStart = false;
+      this.dragType = void 0;
+      this.dragData = void 0;
+      this.removeEventListener();
+    }
+  }
+  const DnDManagerInstance = new DnDManager();
+  const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "HvDraggable"
+    },
+    __name: "Draggable",
+    props: {
+      type: {},
+      immediate: {},
+      disabled: { type: Boolean, default: false },
+      data: {}
+    },
+    setup(__props) {
+      const ImmediateEnumType = {
+        LEFT: "left",
+        RIGHT: "right",
+        TOP: "top",
+        BOTTOM: "bottom",
+        ALL: "all"
+      };
+      const props = __props;
+      const dragItemRef = vue.ref();
+      const isDownThis = vue.ref(false);
+      const downPosition = vue.reactive({
+        x: 0,
+        y: 0
+      });
+      const isDragThis = vue.ref(false);
+      const cloneNodePosition = vue.reactive({
+        x: 0,
+        y: 0
+      });
+      const immediateDirections = vue.computed(() => {
+        if (Array.isArray(props.immediate)) {
+          return props.immediate;
+        }
+        return props.immediate ? [props.immediate] : [];
+      });
+      const cloneNodeStyle = vue.computed(() => {
+        return {
+          transform: `translate(${cloneNodePosition.x}px, ${cloneNodePosition.y}px) translate(-50%, -50%)`
+        };
+      });
+      DnDManagerInstance.on("down", (params) => {
+        const { x, y } = params;
+        const startEl = document.elementFromPoint(x, y);
+        if (!props.disabled && dragItemRef.value && dragItemRef.value.contains(startEl)) {
+          if (immediateDirections.value.includes(ImmediateEnumType.ALL)) {
+            handleStart(params);
+            return;
+          }
+          isDownThis.value = true;
+          downPosition.x = x;
+          downPosition.y = y;
+        }
+      });
+      DnDManagerInstance.on("first-move", (params, event) => {
+        const { x, y } = params;
+        const directions = immediateDirections.value.filter((item) => item !== ImmediateEnumType.ALL);
+        if (isDownThis.value && !props.disabled && directions.length) {
+          const distanceH = x - downPosition.x;
+          const distanceHAbs = Math.abs(distanceH);
+          const distanceV = y - downPosition.y;
+          const distanceVAbs = Math.abs(distanceV);
+          const max = Math.max(distanceHAbs, distanceVAbs);
+          const isMaxH = distanceHAbs === max;
+          const isMaxV = distanceVAbs === max;
+          let isImmediate = false;
+          if (isMaxH) {
+            isImmediate = directions.includes(ImmediateEnumType.LEFT) && distanceH < 0 || directions.includes(ImmediateEnumType.RIGHT) && distanceH > 0;
+          }
+          if (isMaxV && !isImmediate) {
+            isImmediate = directions.includes(ImmediateEnumType.TOP) && distanceV < 0 || directions.includes(ImmediateEnumType.BOTTOM) && distanceV > 0;
+          }
+          if (isImmediate) {
+            event.preventDefault();
+            event.stopPropagation();
+            handleStart(downPosition);
+            handleMove(params);
+            return;
+          }
+        }
+      });
+      DnDManagerInstance.on("start", (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 { point } = params;
+        if (isDragThis.value) {
+          handleMove(point);
+        }
+      });
+      DnDManagerInstance.on("end", () => {
+        isDownThis.value = false;
+        isDragThis.value = false;
+        Object.assign(downPosition, {
+          x: 0,
+          y: 0
+        });
+        Object.assign(cloneNodePosition, {
+          x: 0,
+          y: 0
+        });
+      });
+      function handleStart(point) {
+        isDragThis.value = true;
+        cloneNodePosition.x = point.x;
+        cloneNodePosition.y = point.y;
+        DnDManagerInstance.updateDargInfo(props.type, props.data);
+      }
+      function handleMove(point) {
+        cloneNodePosition.x = point.x;
+        cloneNodePosition.y = point.y;
+      }
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          ref_key: "dragItemRef",
+          ref: dragItemRef,
+          class: vue.normalizeClass(["draggable-area", _ctx.disabled ? "disabled" : ""])
+        }, [
+          vue.renderSlot(_ctx.$slots, "default", {}, void 0, true),
+          isDragThis.value ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: "draggable-clone-item",
+            style: vue.normalizeStyle(cloneNodeStyle.value)
+          }, [
+            vue.renderSlot(_ctx.$slots, "drag-item", {}, () => [
+              vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ], true)
+          ], 4)) : vue.createCommentVNode("", true)
+        ], 2);
+      };
+    }
+  });
+  const _export_sfc = (sfc, props) => {
+    const target = sfc.__vccOpts || sfc;
+    for (const [key, val] of props) {
+      target[key] = val;
+    }
+    return target;
+  };
+  const Draggable = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-34f8fce1"]]);
+  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "HvDroppable"
+    },
+    __name: "Droppable",
+    props: {
+      acceptDragType: {}
+    },
+    emits: ["enter", "move", "drop", "leave"],
+    setup(__props, { emit: __emit }) {
+      const emits = __emit;
+      const props = __props;
+      const dropAreaRef = vue.ref();
+      const isEntered = vue.ref(false);
+      const acceptDragTypeList = vue.computed(() => {
+        return Array.isArray(props.acceptDragType) ? props.acceptDragType : [props.acceptDragType];
+      });
+      function getPositionInArea(point) {
+        if (!dropAreaRef.value) {
+          return {
+            isInArea: false,
+            position: {
+              x: 0,
+              y: 0
+            }
+          };
+        }
+        const { x: pointX, y: pointY } = point;
+        const { x, y, width, height } = dropAreaRef.value.getBoundingClientRect();
+        const posX = pointX - x;
+        const posY = pointY - y;
+        return {
+          isInArea: posX >= 0 && posX <= width && posY >= 0 && posY <= height,
+          position: {
+            x: posX,
+            y: posY
+          }
+        };
+      }
+      DnDManagerInstance.on("move", (params) => {
+        const { type, data, point } = params;
+        if (dropAreaRef.value && acceptDragTypeList.value.includes(type)) {
+          const { isInArea, position } = getPositionInArea(point);
+          if (isInArea) {
+            if (isEntered.value) {
+              emits("move", type, position, data);
+            } else {
+              isEntered.value = true;
+              emits("enter", type, position, data);
+            }
+          } else if (isEntered.value) {
+            isEntered.value = false;
+            emits("leave", type, data);
+          }
+        }
+      });
+      DnDManagerInstance.on("end", ({ type, point, data }) => {
+        if (dropAreaRef.value && acceptDragTypeList.value.includes(type) && isEntered.value) {
+          const { position } = getPositionInArea(point);
+          emits("drop", type, position, data);
+        }
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          ref_key: "dropAreaRef",
+          ref: dropAreaRef,
+          class: "droppable-area"
+        }, [
+          vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ], 512);
+      };
+    }
+  });
+  const Droppable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-28d651f3"]]);
+  const HvDraggable = withInstall(Draggable);
+  const HvDroppable = withInstall(Droppable);
+  exports2.HvDraggable = HvDraggable;
+  exports2.HvDroppable = HvDroppable;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+});

package/dist/style.css

@@ -0,0 +1,20 @@
+.draggable-area[data-v-34f8fce1] {
+  width: fit-content;
+  cursor: grab;
+}
+.draggable-area.disabled[data-v-34f8fce1] {
+  cursor: not-allowed;
+}
+.draggable-clone-item[data-v-34f8fce1] {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99999;
+  width: fit-content;
+  cursor: grabbing;
+  opacity: 0.8;
+  will-change: transform;
+}.droppable-area[data-v-28d651f3] {
+  position: relative;
+  width: fit-content;
+}

package/dist/types/src/Draggable.vue.d.ts

@@ -0,0 +1,47 @@
+import type { DragAndDropDragType } from './manager';
+declare const ImmediateEnumType: {
+    readonly LEFT: "left";
+    readonly RIGHT: "right";
+    readonly TOP: "top";
+    readonly BOTTOM: "bottom";
+    readonly ALL: "all";
+};
+type ImmediateType = (typeof ImmediateEnumType)[keyof typeof ImmediateEnumType];
+type __VLS_Props = {
+    type: DragAndDropDragType;
+    immediate?: ImmediateType | Array<ImmediateType> | undefined;
+    disabled?: boolean;
+    data?: any;
+};
+declare const dragItemRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+/** 是否开始拖动 */
+declare const isDragThis: import("vue").Ref<boolean, boolean>;
+declare const cloneNodeStyle: import("vue").ComputedRef<{
+    transform: string;
+}>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    'drag-item'?: (props: typeof __VLS_3) => any;
+} & {
+    default?: (props: typeof __VLS_5) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    dragItemRef: typeof dragItemRef;
+    isDragThis: typeof isDragThis;
+    cloneNodeStyle: typeof cloneNodeStyle;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/src/Droppable.vue.d.ts

@@ -0,0 +1,41 @@
+import type { DragAndDropDragType, DragAndDropPoint } from './manager';
+type __VLS_Props = {
+    acceptDragType: DragAndDropDragType | Array<DragAndDropDragType>;
+};
+declare const dropAreaRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_1) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    dropAreaRef: typeof dropAreaRef;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    drop: (type: DragAndDropDragType, point: DragAndDropPoint, data: any) => any;
+    move: (type: DragAndDropDragType, point: DragAndDropPoint, data: any) => any;
+    enter: (type: DragAndDropDragType, point: DragAndDropPoint, data: any) => any;
+    leave: (type: DragAndDropDragType, data: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDrop?: ((type: DragAndDropDragType, point: DragAndDropPoint, data: any) => any) | undefined;
+    onMove?: ((type: DragAndDropDragType, point: DragAndDropPoint, data: any) => any) | undefined;
+    onEnter?: ((type: DragAndDropDragType, point: DragAndDropPoint, data: any) => any) | undefined;
+    onLeave?: ((type: DragAndDropDragType, data: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    drop: (type: DragAndDropDragType, point: DragAndDropPoint, data: any) => any;
+    move: (type: DragAndDropDragType, point: DragAndDropPoint, data: any) => any;
+    enter: (type: DragAndDropDragType, point: DragAndDropPoint, data: any) => any;
+    leave: (type: DragAndDropDragType, data: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDrop?: ((type: DragAndDropDragType, point: DragAndDropPoint, data: any) => any) | undefined;
+    onMove?: ((type: DragAndDropDragType, point: DragAndDropPoint, data: any) => any) | undefined;
+    onEnter?: ((type: DragAndDropDragType, point: DragAndDropPoint, data: any) => any) | undefined;
+    onLeave?: ((type: DragAndDropDragType, data: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,6 @@
+import type { SFCWithInstall } from '@havue/utils';
+import Draggable from './Draggable.vue';
+import Droppable from './Droppable.vue';
+export declare const HvDraggable: SFCWithInstall<typeof Draggable>;
+export declare const HvDroppable: SFCWithInstall<typeof Droppable>;
+export type { DragAndDropPoint, DragAndDropDragType, DnDManager } from './manager';

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

@@ -0,0 +1,81 @@
+import { EventBus } from '@havue/shared';
+export type DragAndDropPoint = {
+    x: number;
+    y: number;
+};
+export type DragAndDropDragType = string | number | symbol;
+type Events = {
+    down: (p: DragAndDropPoint) => void;
+    'first-move': (p: DragAndDropPoint, e: MouseEvent | TouchEvent) => void;
+    start: (p: DragAndDropPoint) => void;
+    move: (params: {
+        type: DragAndDropDragType;
+        data: any;
+        point: DragAndDropPoint;
+    }) => void;
+    end: (params: {
+        type: DragAndDropDragType;
+        data: any;
+        point: DragAndDropPoint;
+    }) => void;
+};
+export declare class DnDManager extends EventBus<Events> {
+    /** 是否开始拖动 */
+    isDragStart: boolean;
+    /** 拖动元素类型 */
+    dragType: DragAndDropDragType | undefined;
+    /** Draggable传递的数据，
+     * 供Droppable使用
+     */
+    dragData: any;
+    private isSendFirstMovePos;
+    /** 移动端长按一定时间才触发 onStart */
+    private touchStartPressTime;
+    /** touchstart事件触发的时的时间 */
+    private touchStartTime;
+    /** touchstart时间触发的位置 */
+    private touchStartPosition;
+    /** onMove最后位置 */
+    private lastMovePoint;
+    private emitTouchStartTimer;
+    private destroy;
+    constructor();
+    updateDargInfo(type: Exclude<DragAndDropDragType, undefined>, data: any): void;
+    /**
+     * 通知 Draggable 开始点击
+     * @param point
+     */
+    private onDown;
+    /**
+     * 通知 Draggable 拖拽开始
+     * @param point
+     */
+    private onFirstMove;
+    /**
+     * 通知 Draggable 拖拽开始
+     * @param point
+     */
+    private onStart;
+    /**
+     * 通知 Draggable 移动
+     * @param point
+     * @returns
+     */
+    private onMove;
+    /**
+     * 结束拖拽
+     * @returns
+     */
+    private onEnd;
+    private onMouseDown;
+    private onMouseMove;
+    private onMouseUp;
+    private onTouchStart;
+    private onTouchMove;
+    private onTouchEnd;
+    private bindEventListener;
+    private removeEventListener;
+    destroyed(): void;
+}
+export declare const DnDManagerInstance: DnDManager;
+export {};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@havue/drag-and-drop",
+  "version": "1.0.0",
+  "description": "Drag and drop components for Vue3",
+  "keywords": [
+    "havue",
+    "components",
+    "drag",
+    "drop",
+    "vue3"
+  ],
+  "license": "MIT",
+  "homepage": "https://happypedestrian.github.io/havue/guide/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/HappyPedestrian/havue.git"
+  },
+  "dependencies": {
+    "@havue/shared": "^1.0.0"
+  },
+  "devDependencies": {
+    "vue": "^3.3.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/drag-and-drop.umd.js",
+  "module": "./dist/drag-and-drop.mjs",
+  "types": "./dist/types/src/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/drag-and-drop.umd.js",
+      "import": "./dist/drag-and-drop.mjs",
+      "types": "./dist/types/src/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "vite build --mode package"
+  }
+}