@marsio/vue-draggable 1.0.8 → 1.0.10

package/build/cjs/DraggableCore.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.draggableCoreProps = exports.draggableCoreDefaultProps = exports.defaultDraggableEventHandler = exports.default = void 0;
-var _get2 = _interopRequireDefault(require("lodash/get"));
 var _vue = require("vue");
+var _noop = _interopRequireDefault(require("./utils/noop"));
 var _domFns = require("./utils/domFns");
 var _positionFns = require("./utils/positionFns");
 var _log = _interopRequireDefault(require("./utils/log"));
@@ -45,27 +45,30 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * Note: This component does not render any DOM elements itself; it merely wraps its default slot's content with draggable functionality.
  */
 
-const funcVoid = function () {};
 // Simple abstraction for dragging events names.
 const eventsFor = {
   touch: {
     start: 'touchstart',
     move: 'touchmove',
-    stop: 'touchend'
+    stop: 'touchend',
+    cancel: 'touchcancel'
   },
   mouse: {
     start: 'mousedown',
     move: 'mousemove',
     stop: 'mouseup'
+  },
+  pointer: {
+    start: 'pointerdown',
+    move: 'pointermove',
+    stop: 'pointerup',
+    cancel: 'pointercancel'
   }
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const defaultDraggableEventHandler = (e, data) => true;
-
-// Default to mouse events.
 exports.defaultDraggableEventHandler = defaultDraggableEventHandler;
-let dragEventFor = eventsFor.mouse;
 const draggableCoreDefaultProps = exports.draggableCoreDefaultProps = {
   allowAnyClick: {
     type: Boolean,
@@ -75,21 +78,77 @@ const draggableCoreDefaultProps = exports.draggableCoreDefaultProps = {
     type: Boolean,
     default: false
   },
+  allowMobileScroll: {
+    type: Boolean,
+    default: false
+  },
+  autoScroll: {
+    type: Boolean,
+    default: false
+  },
+  autoScrollThreshold: {
+    type: Number,
+    default: 30
+  },
+  autoScrollMaxSpeed: {
+    type: Number,
+    default: 20
+  },
+  autoScrollAxis: {
+    type: String,
+    default: 'both'
+  },
+  autoScrollIncludeWindow: {
+    type: Boolean,
+    default: true
+  },
+  autoScrollContainer: {
+    type: [Object, String, Array],
+    default: null
+  },
+  cancelInteractiveElements: {
+    type: Boolean,
+    default: false
+  },
+  enableClickSuppression: {
+    type: Boolean,
+    default: false
+  },
+  clickSuppressionDuration: {
+    type: Number,
+    default: 250
+  },
+  dragStartThreshold: {
+    type: Number,
+    default: 0
+  },
+  dragStartDelay: {
+    type: Number,
+    default: 0
+  },
+  dragStartDelayTolerance: {
+    type: Number,
+    default: 5
+  },
   enableUserSelectHack: {
     type: Boolean,
     default: true
   },
+  useRafDrag: {
+    type: Boolean,
+    default: false
+  },
   startFn: {
     type: Function,
-    default: () => funcVoid
+    default: _noop.default
   },
   dragFn: {
     type: Function,
-    default: () => funcVoid
+    default: _noop.default
   },
   stopFn: {
     type: Function,
-    default: () => funcVoid
+    default: _noop.default
   },
   scale: {
     type: Number,
@@ -133,20 +192,541 @@ var _default = exports.default = (0, _vue.defineComponent)({
       emit
     } = _ref;
     const rootElement = (0, _vue.ref)(null);
-    const state = (0, _vue.reactive)({
+    // Default to mouse events (instance-scoped, avoids cross-instance interference).
+    let dragEventFor = eventsFor.mouse;
+    let draggingNode = null;
+    let dragRafId = null;
+    let pendingDragEvent = null;
+    let lastProcessedX = NaN;
+    let lastProcessedY = NaN;
+    let pendingDragStart = false;
+    let pendingDragStartMode = null;
+    let dragStartX = NaN;
+    let dragStartY = NaN;
+    let pendingX = NaN;
+    let pendingY = NaN;
+    let dragStartDelayTimerId = null;
+    let dragStartDelayOwnerWindow = null;
+    let dragStartDelayPassed = false;
+    let dragStartDelayEvent = null;
+    let hasDragged = false;
+    let suppressClickDoc = null;
+    let suppressClickListener = null;
+    let suppressClickTimerId = null;
+    let autoScrollRafId = null;
+    let autoScrollContainers = [];
+    let autoScrollLastEvent = null;
+    let pointerCaptureTarget = null;
+    let ignoreTouchStartUntil = 0;
+    const isElementNode = v => {
+      return !!v && typeof v === 'object' && 'nodeType' in v && v.nodeType === 1;
+    };
+    const isRefLike = v => {
+      return !!v && typeof v === 'object' && 'value' in v;
+    };
+    const state = {
       dragging: false,
       // Used while dragging to determine deltas.
       lastX: NaN,
       lastY: NaN,
       touchIdentifier: null,
+      pointerIdentifier: null,
       mounted: false
-    });
+    };
     const findDOMNode = () => {
-      return props.nodeRef?.value || rootElement.value;
+      if (draggingNode) return draggingNode;
+      const nodeRef = props.nodeRef;
+      if (isRefLike(nodeRef)) {
+        const v = nodeRef.value;
+        if (isElementNode(v)) return v;
+      } else if (isElementNode(nodeRef)) {
+        return nodeRef;
+      }
+      return rootElement.value;
     };
-    const handleDrag = e => {
-      // Get the current drag point from the event. This is used as the offset.
-      const position = (0, _positionFns.getControlPosition)(e, {
+    const getOwnerWindow = () => {
+      const ownerWindow = draggingNode?.ownerDocument?.defaultView;
+      return ownerWindow || window;
+    };
+    const getDragStartDelay = () => {
+      const delay = typeof props.dragStartDelay === 'number' ? props.dragStartDelay : 0;
+      return delay > 0 ? delay : 0;
+    };
+    const getDragStartThreshold = () => {
+      const threshold = typeof props.dragStartThreshold === 'number' ? props.dragStartThreshold : 0;
+      if (threshold <= 0) return 0;
+      const scale = typeof props.scale === 'number' ? props.scale : 1;
+      if (!scale) return threshold;
+      return threshold / scale;
+    };
+    const getDragStartDelayTolerance = () => {
+      const tolerance = typeof props.dragStartDelayTolerance === 'number' ? props.dragStartDelayTolerance : 0;
+      if (tolerance <= 0) return 0;
+      const scale = typeof props.scale === 'number' ? props.scale : 1;
+      if (!scale) return tolerance;
+      return tolerance / scale;
+    };
+    const meetsDragStartThreshold = (x, y) => {
+      const threshold = getDragStartThreshold();
+      if (threshold <= 0) return true;
+      if (!Number.isFinite(dragStartX) || !Number.isFinite(dragStartY)) return true;
+      const dx = x - dragStartX;
+      const dy = y - dragStartY;
+      return dx * dx + dy * dy >= threshold * threshold;
+    };
+    const exceedsDragStartDelayTolerance = (x, y) => {
+      const tolerance = getDragStartDelayTolerance();
+      if (tolerance <= 0) return false;
+      if (!Number.isFinite(dragStartX) || !Number.isFinite(dragStartY)) return false;
+      const dx = x - dragStartX;
+      const dy = y - dragStartY;
+      return dx * dx + dy * dy > tolerance * tolerance;
+    };
+    const clearDragStartDelayTimer = () => {
+      if (dragStartDelayTimerId == null) return;
+      const ownerWindow = dragStartDelayOwnerWindow || window;
+      ownerWindow.clearTimeout?.(dragStartDelayTimerId);
+      dragStartDelayTimerId = null;
+      dragStartDelayOwnerWindow = null;
+    };
+    const clearClickSuppression = () => {
+      if (suppressClickTimerId != null) {
+        const ownerWindow = suppressClickDoc?.defaultView || window;
+        ownerWindow.clearTimeout?.(suppressClickTimerId);
+        suppressClickTimerId = null;
+      }
+      if (suppressClickDoc && suppressClickListener) {
+        suppressClickDoc.removeEventListener('click', suppressClickListener, true);
+      }
+      suppressClickDoc = null;
+      suppressClickListener = null;
+    };
+    const installClickSuppression = doc => {
+      if (!props.enableClickSuppression) return;
+      const duration = typeof props.clickSuppressionDuration === 'number' ? props.clickSuppressionDuration : 0;
+      if (duration < 0) return;
+      clearClickSuppression();
+      const ownerWindow = doc.defaultView || window;
+      const suppressUntil = Date.now() + duration;
+      const handler = event => {
+        if (Date.now() > suppressUntil) {
+          clearClickSuppression();
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation?.();
+        clearClickSuppression();
+      };
+      suppressClickDoc = doc;
+      suppressClickListener = handler;
+      doc.addEventListener('click', handler, true);
+      suppressClickTimerId = ownerWindow.setTimeout(() => {
+        clearClickSuppression();
+      }, duration);
+    };
+    const getAutoScrollThreshold = () => {
+      const threshold = typeof props.autoScrollThreshold === 'number' ? props.autoScrollThreshold : 0;
+      return threshold > 0 ? threshold : 0;
+    };
+    const getAutoScrollMaxSpeed = () => {
+      const maxSpeed = typeof props.autoScrollMaxSpeed === 'number' ? props.autoScrollMaxSpeed : 0;
+      return maxSpeed > 0 ? maxSpeed : 0;
+    };
+    const getAutoScrollAxis = () => {
+      const axis = props.autoScrollAxis;
+      if (axis === 'x' || axis === 'y' || axis === 'none') return axis;
+      return 'both';
+    };
+    const shouldAutoScrollIncludeWindow = () => {
+      return props.autoScrollIncludeWindow !== false;
+    };
+    const isPointerEvent = e => {
+      return !!e && typeof e === 'object' && 'pointerId' in e;
+    };
+    const shouldUsePointerEventsForTouch = (node, e) => {
+      if (e.pointerType !== 'touch') return true;
+      const ownerWindow = node.ownerDocument.defaultView || window;
+      const style = ownerWindow.getComputedStyle(node);
+      const touchAction = style.touchAction || '';
+      return touchAction !== '' && touchAction !== 'auto';
+    };
+    const releasePointerCapture = () => {
+      if (!pointerCaptureTarget) return;
+      const pointerId = state.pointerIdentifier;
+      if (typeof pointerId !== 'number') {
+        pointerCaptureTarget = null;
+        return;
+      }
+      try {
+        if (pointerCaptureTarget.hasPointerCapture?.(pointerId)) {
+          pointerCaptureTarget.releasePointerCapture(pointerId);
+        } else {
+          pointerCaptureTarget.releasePointerCapture?.(pointerId);
+        }
+      } catch {
+        // ignore
+      }
+      pointerCaptureTarget = null;
+    };
+    const trySetPointerCapture = (node, pointerId) => {
+      if (!node.setPointerCapture) return;
+      try {
+        node.setPointerCapture(pointerId);
+        pointerCaptureTarget = node;
+      } catch {
+        // ignore
+      }
+    };
+    const getEventClientPosition = e => {
+      if (typeof state.pointerIdentifier === 'number') {
+        const maybePointerEvent = e;
+        if (typeof maybePointerEvent.pointerId !== 'number') return null;
+        if (maybePointerEvent.pointerId !== state.pointerIdentifier) return null;
+        if (typeof maybePointerEvent.clientX === 'number' && typeof maybePointerEvent.clientY === 'number') {
+          const result = {
+            clientX: maybePointerEvent.clientX,
+            clientY: maybePointerEvent.clientY
+          };
+          return result;
+        }
+        return null;
+      }
+      if (typeof state.touchIdentifier === 'number') {
+        const touch = (0, _domFns.getTouch)(e, state.touchIdentifier);
+        if (touch && typeof touch.clientX === 'number' && typeof touch.clientY === 'number') {
+          const result = {
+            clientX: touch.clientX,
+            clientY: touch.clientY
+          };
+          return result;
+        }
+        return null;
+      }
+      const maybeMouseEvent = e;
+      if (typeof maybeMouseEvent.clientX === 'number' && typeof maybeMouseEvent.clientY === 'number') {
+        const result = {
+          clientX: maybeMouseEvent.clientX,
+          clientY: maybeMouseEvent.clientY
+        };
+        return result;
+      }
+      return null;
+    };
+    const isScrollableElement = (el, ownerWindow) => {
+      const style = ownerWindow.getComputedStyle(el);
+      const overflowY = style.overflowY;
+      const overflowX = style.overflowX;
+      const canScrollY = (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') && el.scrollHeight > el.clientHeight;
+      const canScrollX = (overflowX === 'auto' || overflowX === 'scroll' || overflowX === 'overlay') && el.scrollWidth > el.clientWidth;
+      return canScrollX || canScrollY;
+    };
+    const resolveAutoScrollContainerInput = (input, node) => {
+      const ownerDocument = node.ownerDocument;
+      const ownerWindow = ownerDocument.defaultView || window;
+      if (typeof input === 'string') {
+        const selector = input.trim();
+        if (!selector) return [];
+        if (selector === 'window') return [ownerWindow];
+        if (selector === 'self') return [node];
+        if (selector === 'parent') {
+          const parent = node.parentElement;
+          return parent ? [parent] : [];
+        }
+        const el = ownerDocument.querySelector(selector);
+        if (el && el instanceof ownerWindow.HTMLElement) return [el];
+        return [];
+      }
+      if (input === ownerWindow) return [ownerWindow];
+      if (isElementNode(input)) return [input];
+      return [];
+    };
+    const getAutoScrollContainers = (node, includeWindow) => {
+      const ownerDocument = node.ownerDocument;
+      const ownerWindow = ownerDocument.defaultView || window;
+      const containers = [];
+      let el = node.parentElement;
+      while (el && el !== ownerDocument.body) {
+        if (isScrollableElement(el, ownerWindow)) containers.push(el);
+        el = el.parentElement;
+      }
+      if (includeWindow) containers.push(ownerWindow);
+      return containers;
+    };
+    const getAutoScrollContainersForNode = node => {
+      const includeWindow = shouldAutoScrollIncludeWindow();
+      const containerProp = props.autoScrollContainer;
+      if (containerProp == null) return getAutoScrollContainers(node, includeWindow);
+      const inputs = Array.isArray(containerProp) ? containerProp : [containerProp];
+      const resolved = [];
+      for (const input of inputs) {
+        resolved.push(...resolveAutoScrollContainerInput(input, node));
+      }
+      if (includeWindow) {
+        const ownerWindow = node.ownerDocument.defaultView || window;
+        resolved.push(ownerWindow);
+      }
+      const deduped = [];
+      const seen = new Set();
+      for (const item of resolved) {
+        if (seen.has(item)) continue;
+        seen.add(item);
+        deduped.push(item);
+      }
+      return deduped;
+    };
+    const cancelAutoScrollRaf = () => {
+      if (autoScrollRafId == null) return;
+      const ownerWindow = getOwnerWindow();
+      ownerWindow.cancelAnimationFrame?.(autoScrollRafId);
+      autoScrollRafId = null;
+    };
+    const scrollElementBy = (el, dx, dy) => {
+      let movedX = 0;
+      let movedY = 0;
+      if (dx) {
+        const prev = el.scrollLeft;
+        const max = Math.max(0, el.scrollWidth - el.clientWidth);
+        const next = Math.max(0, Math.min(prev + dx, max));
+        el.scrollLeft = next;
+        movedX = next - prev;
+      }
+      if (dy) {
+        const prev = el.scrollTop;
+        const max = Math.max(0, el.scrollHeight - el.clientHeight);
+        const next = Math.max(0, Math.min(prev + dy, max));
+        el.scrollTop = next;
+        movedY = next - prev;
+      }
+      return {
+        dx: movedX,
+        dy: movedY
+      };
+    };
+    const scrollWindowBy = (ownerWindow, dx, dy) => {
+      const doc = ownerWindow.document;
+      const scrollingElement = doc.scrollingElement || doc.documentElement || doc.body;
+      if (!scrollingElement) {
+        ownerWindow.scrollBy(dx, dy);
+        return {
+          dx,
+          dy
+        };
+      }
+      return scrollElementBy(scrollingElement, dx, dy);
+    };
+    const calcAutoScrollSpeed = (distanceToEdge, threshold, maxSpeed) => {
+      if (threshold <= 0 || maxSpeed <= 0) return 0;
+      if (distanceToEdge >= threshold) return 0;
+      const clamped = Math.max(0, Math.min(distanceToEdge, threshold));
+      const ratio = (threshold - clamped) / threshold;
+      const speed = Math.ceil(ratio * maxSpeed);
+      return speed > 0 ? speed : 0;
+    };
+    const getAutoScrollDeltaForElement = (el, clientX, clientY, threshold, maxSpeed) => {
+      const rect = el.getBoundingClientRect();
+      const thresholdX = Math.min(threshold, rect.width / 2);
+      const thresholdY = Math.min(threshold, rect.height / 2);
+      let dx = 0;
+      let dy = 0;
+      if (thresholdX > 0) {
+        const leftDist = Math.abs(clientX - rect.left);
+        const rightDist = Math.abs(rect.right - clientX);
+        if (leftDist < thresholdX || rightDist < thresholdX) {
+          if (leftDist <= rightDist) dx = -calcAutoScrollSpeed(leftDist, thresholdX, maxSpeed);else dx = calcAutoScrollSpeed(rightDist, thresholdX, maxSpeed);
+        }
+      }
+      if (thresholdY > 0) {
+        const topDist = Math.abs(clientY - rect.top);
+        const bottomDist = Math.abs(rect.bottom - clientY);
+        if (topDist < thresholdY || bottomDist < thresholdY) {
+          if (topDist <= bottomDist) dy = -calcAutoScrollSpeed(topDist, thresholdY, maxSpeed);else dy = calcAutoScrollSpeed(bottomDist, thresholdY, maxSpeed);
+        }
+      }
+      return {
+        dx,
+        dy
+      };
+    };
+    const getAutoScrollDeltaForWindow = (ownerWindow, clientX, clientY, threshold, maxSpeed) => {
+      const width = ownerWindow.innerWidth || 0;
+      const height = ownerWindow.innerHeight || 0;
+      const thresholdX = Math.min(threshold, width / 2);
+      const thresholdY = Math.min(threshold, height / 2);
+      let dx = 0;
+      let dy = 0;
+      if (thresholdX > 0) {
+        const leftDist = Math.abs(clientX);
+        const rightDist = Math.abs(width - clientX);
+        if (leftDist < thresholdX || rightDist < thresholdX) {
+          if (leftDist <= rightDist) dx = -calcAutoScrollSpeed(leftDist, thresholdX, maxSpeed);else dx = calcAutoScrollSpeed(rightDist, thresholdX, maxSpeed);
+        }
+      }
+      if (thresholdY > 0) {
+        const topDist = Math.abs(clientY);
+        const bottomDist = Math.abs(height - clientY);
+        if (topDist < thresholdY || bottomDist < thresholdY) {
+          if (topDist <= bottomDist) dy = -calcAutoScrollSpeed(topDist, thresholdY, maxSpeed);else dy = calcAutoScrollSpeed(bottomDist, thresholdY, maxSpeed);
+        }
+      }
+      return {
+        dx,
+        dy
+      };
+    };
+    const autoScrollTick = () => {
+      autoScrollRafId = null;
+      if (!props.autoScroll || !state.dragging) return;
+      if (!autoScrollContainers.length) return;
+      const threshold = getAutoScrollThreshold();
+      const maxSpeed = getAutoScrollMaxSpeed();
+      if (!threshold || !maxSpeed) return;
+      const lastEvent = autoScrollLastEvent || pendingDragEvent;
+      if (!lastEvent) return;
+      const pos = getEventClientPosition(lastEvent);
+      if (!pos) return;
+      const posClientX = pos.clientX;
+      const posClientY = pos.clientY;
+      const ownerWindow = getOwnerWindow();
+      const axis = getAutoScrollAxis();
+      const allowX = axis === 'both' || axis === 'x';
+      const allowY = axis === 'both' || axis === 'y';
+      if (!allowX && !allowY) return;
+      let didX = !allowX;
+      let didY = !allowY;
+      let didScroll = false;
+      for (const container of autoScrollContainers) {
+        if (didX && didY) break;
+        const {
+          dx,
+          dy
+        } = container === ownerWindow ? getAutoScrollDeltaForWindow(ownerWindow, posClientX, posClientY, threshold, maxSpeed) : getAutoScrollDeltaForElement(container, posClientX, posClientY, threshold, maxSpeed);
+        const attemptX = didX ? 0 : dx;
+        const attemptY = didY ? 0 : dy;
+        if (!attemptX && !attemptY) continue;
+        const moved = container === ownerWindow ? scrollWindowBy(ownerWindow, attemptX, attemptY) : scrollElementBy(container, attemptX, attemptY);
+        if (moved.dx) didX = true;
+        if (moved.dy) didY = true;
+        if (moved.dx || moved.dy) didScroll = true;
+      }
+      if (!didScroll) return;
+      autoScrollLastEvent = lastEvent;
+      if (props.useRafDrag) {
+        cancelDragRaf();
+        pendingDragEvent = lastEvent;
+        flushDragRaf();
+      } else {
+        handleDrag(lastEvent);
+      }
+      if (!state.dragging) return;
+      ensureAutoScrollRaf();
+    };
+    const ensureAutoScrollRaf = () => {
+      if (!props.autoScroll || !state.dragging) return;
+      if (autoScrollRafId != null) return;
+      const ownerWindow = getOwnerWindow();
+      autoScrollRafId = ownerWindow.requestAnimationFrame(autoScrollTick);
+    };
+    const cancelPendingDragStart = () => {
+      const thisNode = findDOMNode();
+      cancelDragRaf();
+      clearDragStartDelayTimer();
+      cancelAutoScrollRaf();
+      state.dragging = false;
+      state.lastX = NaN;
+      state.lastY = NaN;
+      state.touchIdentifier = null;
+      releasePointerCapture();
+      state.pointerIdentifier = null;
+      draggingNode = null;
+      pendingDragEvent = null;
+      lastProcessedX = NaN;
+      lastProcessedY = NaN;
+      pendingDragStart = false;
+      pendingDragStartMode = null;
+      dragStartX = NaN;
+      dragStartY = NaN;
+      pendingX = NaN;
+      pendingY = NaN;
+      dragStartDelayPassed = false;
+      dragStartDelayEvent = null;
+      hasDragged = false;
+      autoScrollContainers = [];
+      autoScrollLastEvent = null;
+      if (thisNode) {
+        (0, _domFns.removeEvent)(thisNode.ownerDocument, dragEventFor.move, handleDrag);
+        (0, _domFns.removeEvent)(thisNode.ownerDocument, dragEventFor.stop, handleDragStop);
+        if (dragEventFor.cancel) {
+          (0, _domFns.removeEvent)(thisNode.ownerDocument, dragEventFor.cancel, handleDragStop);
+        }
+      }
+    };
+    const startDrag = (e, x, y, options) => {
+      const coreEvent = (0, _positionFns.createCoreData)({
+        props,
+        findDOMNode,
+        state: {
+          lastX: NaN,
+          lastY: NaN
+        }
+      }, x, y);
+      (0, _log.default)('DraggableCore: handleDragStart: %j', coreEvent);
+      (0, _log.default)('calling', props.startFn);
+      const shouldUpdate = props.startFn !== _noop.default ? props.startFn?.(e, coreEvent) : undefined;
+      if (shouldUpdate === false || state.mounted === false) {
+        cancelPendingDragStart();
+        return false;
+      }
+      const thisNode = findDOMNode();
+      if (thisNode && props.enableUserSelectHack) (0, _domFns.addUserSelectStyles)(thisNode.ownerDocument);
+      if (options?.resetLastCoords) {
+        state.lastX = x;
+        state.lastY = y;
+        lastProcessedX = x;
+        lastProcessedY = y;
+      }
+      pendingDragStart = false;
+      pendingDragStartMode = null;
+      dragStartDelayPassed = false;
+      dragStartDelayEvent = null;
+      state.dragging = true;
+      autoScrollLastEvent = e;
+      if (props.autoScroll) {
+        const node = findDOMNode();
+        autoScrollContainers = node ? getAutoScrollContainersForNode(node) : [];
+        ensureAutoScrollRaf();
+      }
+      return true;
+    };
+    const tryStartDrag = (e, x, y) => {
+      if (!pendingDragStart) return state.dragging;
+      if (pendingDragStartMode === 'delay') {
+        if (!dragStartDelayPassed) return false;
+        return startDrag(e, x, y, {
+          resetLastCoords: true
+        });
+      }
+      if (!meetsDragStartThreshold(x, y)) return false;
+      return startDrag(e, x, y);
+    };
+    const cancelDragRaf = () => {
+      if (dragRafId == null) return;
+      const ownerWindow = getOwnerWindow();
+      ownerWindow.cancelAnimationFrame?.(dragRafId);
+      dragRafId = null;
+    };
+    const scheduleDragRaf = cb => {
+      if (dragRafId != null) return;
+      const ownerWindow = getOwnerWindow();
+      dragRafId = ownerWindow.requestAnimationFrame(cb);
+    };
+    const flushDragRaf = () => {
+      dragRafId = null;
+      if (!state.dragging && !pendingDragStart) return;
+      const lastEvent = pendingDragEvent;
+      if (!lastEvent) return;
+      autoScrollLastEvent = lastEvent;
+      const position = (0, _positionFns.getControlPosition)(lastEvent, {
         props,
         findDOMNode
       }, state.touchIdentifier);
@@ -155,15 +735,34 @@ var _default = exports.default = (0, _vue.defineComponent)({
         x,
         y
       } = position;
+      const baseX = Number.isFinite(lastProcessedX) ? lastProcessedX : state.lastX;
+      const baseY = Number.isFinite(lastProcessedY) ? lastProcessedY : state.lastY;
+      if (!state.dragging) {
+        if (pendingDragStartMode === 'delay') {
+          pendingX = x;
+          pendingY = y;
+          if (!dragStartDelayPassed) {
+            if (exceedsDragStartDelayTolerance(x, y)) cancelPendingDragStart();
+            return;
+          }
+        }
+        const started = tryStartDrag(lastEvent, x, y);
+        if (!started) return;
+      }
+
+      // Skip useless drag (no movement).
+      if (x === baseX && y === baseY) return;
 
       // Snap to grid if prop has been provided
       if (Array.isArray(props.grid)) {
-        let deltaX = x - state.lastX,
-          deltaY = y - state.lastY;
+        let deltaX = x - baseX,
+          deltaY = y - baseY;
         [deltaX, deltaY] = (0, _positionFns.snapToGrid)(props.grid, deltaX, deltaY);
         if (!deltaX && !deltaY) return; // skip useless drag
-        x = state.lastX + deltaX, y = state.lastY + deltaY;
+        x = baseX + deltaX, y = baseY + deltaY;
       }
+      lastProcessedX = x;
+      lastProcessedY = y;
       const coreEvent = (0, _positionFns.createCoreData)({
         props,
         findDOMNode,
@@ -172,23 +771,59 @@ var _default = exports.default = (0, _vue.defineComponent)({
       (0, _log.default)('DraggableCore: handleDrag: %j', coreEvent);
 
       // Call event handler. If it returns explicit false, trigger end.
-      const shouldUpdate = props.dragFn?.(e, coreEvent);
+      const shouldUpdate = props.dragFn !== _noop.default ? props.dragFn?.(lastEvent, coreEvent) : undefined;
       if (shouldUpdate === false || state.mounted === false) {
-        try {
-          handleDragStop(new MouseEvent('mouseup'));
-        } catch (err) {
-          // Old browsers
-          const event = document.createEvent('MouseEvents');
-          event.initMouseEvent('mouseup', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
-          handleDragStop(event);
-        }
+        handleDragStop(lastEvent);
         return;
       }
       state.lastX = x;
       state.lastY = y;
+      hasDragged = true;
+      ensureAutoScrollRaf();
     };
-    const handleDragStop = e => {
-      if (!state.dragging) return;
+    const flushPendingDragRaf = () => {
+      if (dragRafId == null) return;
+      cancelDragRaf();
+      flushDragRaf();
+    };
+    const handleDrag = e => {
+      if (typeof state.pointerIdentifier === 'number') {
+        if (!isPointerEvent(e)) return;
+        if (e.pointerId !== state.pointerIdentifier) return;
+      }
+      autoScrollLastEvent = e;
+      if (props.useRafDrag) {
+        const isTouchLike = dragEventFor === eventsFor.touch || dragEventFor === eventsFor.pointer && isPointerEvent(e) && e.pointerType === 'touch';
+        if (isTouchLike) {
+          const position = (0, _positionFns.getControlPosition)(e, {
+            props,
+            findDOMNode
+          }, state.touchIdentifier);
+          if (position == null) return;
+          const {
+            x,
+            y
+          } = position;
+          if (!state.dragging) {
+            if (pendingDragStartMode === 'delay') {
+              pendingX = x;
+              pendingY = y;
+              if (!dragStartDelayPassed) {
+                if (exceedsDragStartDelayTolerance(x, y)) cancelPendingDragStart();
+                return;
+              }
+            }
+            const started = tryStartDrag(e, x, y);
+            if (!started) return;
+          }
+          if (!props.allowMobileScroll && e.cancelable !== false) e.preventDefault();
+        }
+        pendingDragEvent = e;
+        scheduleDragRaf(flushDragRaf);
+        ensureAutoScrollRaf();
+        return;
+      }
+      // Get the current drag point from the event. This is used as the offset.
       const position = (0, _positionFns.getControlPosition)(e, {
         props,
         findDOMNode
@@ -198,12 +833,32 @@ var _default = exports.default = (0, _vue.defineComponent)({
         x,
         y
       } = position;
+      if (!state.dragging) {
+        if (pendingDragStartMode === 'delay') {
+          pendingX = x;
+          pendingY = y;
+          if (!dragStartDelayPassed) {
+            if (exceedsDragStartDelayTolerance(x, y)) cancelPendingDragStart();
+            return;
+          }
+        }
+        const started = tryStartDrag(e, x, y);
+        if (!started) return;
+      }
+      const isTouchLike = dragEventFor === eventsFor.touch || dragEventFor === eventsFor.pointer && isPointerEvent(e) && e.pointerType === 'touch';
+      if (isTouchLike && !props.allowMobileScroll && e.cancelable !== false) {
+        e.preventDefault();
+      }
+
+      // Skip useless drag (no movement).
+      if (x === state.lastX && y === state.lastY) return;
 
       // Snap to grid if prop has been provided
       if (Array.isArray(props.grid)) {
-        let deltaX = x - state.lastX || 0;
-        let deltaY = y - state.lastY || 0;
+        let deltaX = x - state.lastX,
+          deltaY = y - state.lastY;
         [deltaX, deltaY] = (0, _positionFns.snapToGrid)(props.grid, deltaX, deltaY);
+        if (!deltaX && !deltaY) return; // skip useless drag
         x = state.lastX + deltaX, y = state.lastY + deltaY;
       }
       const coreEvent = (0, _positionFns.createCoreData)({
@@ -211,26 +866,97 @@ var _default = exports.default = (0, _vue.defineComponent)({
         findDOMNode,
         state
       }, x, y);
+      (0, _log.default)('DraggableCore: handleDrag: %j', coreEvent);
 
-      // Call event handler
-      const shouldContinue = props.stopFn?.(e, coreEvent);
-      if (shouldContinue === false || state.mounted === false) return false;
+      // Call event handler. If it returns explicit false, trigger end.
+      const shouldUpdate = props.dragFn !== _noop.default ? props.dragFn?.(e, coreEvent) : undefined;
+      if (shouldUpdate === false || state.mounted === false) {
+        handleDragStop(e);
+        return;
+      }
+      state.lastX = x;
+      state.lastY = y;
+      hasDragged = true;
+      ensureAutoScrollRaf();
+    };
+    const handleDragStop = e => {
+      if (!state.dragging && !pendingDragStart) return;
+      if (typeof state.pointerIdentifier === 'number' && isPointerEvent(e) && e.pointerId !== state.pointerIdentifier) {
+        return;
+      }
+      if (props.useRafDrag) {
+        flushPendingDragRaf();
+      }
+      cancelAutoScrollRaf();
+      autoScrollContainers = [];
+      autoScrollLastEvent = null;
       const thisNode = findDOMNode();
-      if (thisNode) {
-        // Remove user-select hack
-        if (props.enableUserSelectHack) (0, _domFns.removeUserSelectStyles)(thisNode.ownerDocument);
+      if (state.dragging) {
+        const position = (0, _positionFns.getControlPosition)(e, {
+          props,
+          findDOMNode
+        }, state.touchIdentifier);
+        if (position == null) return;
+        let {
+          x,
+          y
+        } = position;
+
+        // Snap to grid if prop has been provided
+        if (Array.isArray(props.grid)) {
+          let deltaX = x - state.lastX || 0;
+          let deltaY = y - state.lastY || 0;
+          [deltaX, deltaY] = (0, _positionFns.snapToGrid)(props.grid, deltaX, deltaY);
+          x = state.lastX + deltaX, y = state.lastY + deltaY;
+        }
+        const coreEvent = (0, _positionFns.createCoreData)({
+          props,
+          findDOMNode,
+          state
+        }, x, y);
+
+        // Call event handler
+        const shouldContinue = props.stopFn !== _noop.default ? props.stopFn?.(e, coreEvent) : undefined;
+        if (shouldContinue === false || state.mounted === false) return false;
+        if (thisNode) {
+          // Remove user-select hack
+          if (props.enableUserSelectHack) (0, _domFns.removeUserSelectStyles)(thisNode.ownerDocument);
+        }
+        (0, _log.default)('DraggableCore: handleDragStop: %j', coreEvent);
+      }
+      if (thisNode && state.dragging && hasDragged) {
+        installClickSuppression(thisNode.ownerDocument);
       }
-      (0, _log.default)('DraggableCore: handleDragStop: %j', coreEvent);
 
       // Reset the el.
       state.dragging = false;
       state.lastX = NaN;
       state.lastY = NaN;
+      state.touchIdentifier = null;
+      releasePointerCapture();
+      state.pointerIdentifier = null;
+      draggingNode = null;
+      pendingDragEvent = null;
+      lastProcessedX = NaN;
+      lastProcessedY = NaN;
+      pendingDragStart = false;
+      pendingDragStartMode = null;
+      dragStartX = NaN;
+      dragStartY = NaN;
+      pendingX = NaN;
+      pendingY = NaN;
+      dragStartDelayPassed = false;
+      dragStartDelayEvent = null;
+      clearDragStartDelayTimer();
+      hasDragged = false;
       if (thisNode) {
         // Remove event handlers
         (0, _log.default)('DraggableCore: Removing handlers');
         (0, _domFns.removeEvent)(thisNode.ownerDocument, dragEventFor.move, handleDrag);
         (0, _domFns.removeEvent)(thisNode.ownerDocument, dragEventFor.stop, handleDragStop);
+        if (dragEventFor.cancel) {
+          (0, _domFns.removeEvent)(thisNode.ownerDocument, dragEventFor.cancel, handleDragStop);
+        }
       }
     };
     const handleDragStart = e => {
@@ -242,7 +968,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
 
       // Get nodes. Be sure to grab relative document (could be iframed)
       const thisNode = findDOMNode();
-      if (!(0, _get2.default)(thisNode, 'ownerDocument.body')) {
+      if (!thisNode?.ownerDocument?.body) {
         // throw new Error('<DraggableCore> not mounted on DragStart!');
       }
       const {
@@ -253,15 +979,14 @@ var _default = exports.default = (0, _vue.defineComponent)({
       if (props.disabled || ownerDocument && !(e.target instanceof ownerDocument.defaultView.Node) || props.handle && !(0, _domFns.matchesSelectorAndParentsTo)(e.target, props.handle, thisNode) || props.cancel && (0, _domFns.matchesSelectorAndParentsTo)(e.target, props.cancel, thisNode)) {
         return;
       }
+      if (props.cancelInteractiveElements && (0, _domFns.matchesSelectorAndParentsTo)(e.target, 'input,textarea,button,select,option,a,[contenteditable]:not([contenteditable="false"])', thisNode)) {
+        return;
+      }
 
-      // Prevent scrolling on mobile devices, like ipad/iphone.
-      // Important that this is after handle/cancel.
-      if (e.type === 'touchstart') e.preventDefault();
-
-      // Set touch identifier in component state if this is a touch event. This allows us to
-      // distinguish between individual touches on multitouch screens by identifying which
-      // touchpoint was set to this element.
-      const touchIdentifier = (0, _domFns.getTouchIdentifier)(e);
+      // Track which pointer/touch is active so multi-touch / multi-pointer doesn't interfere.
+      const pointerEvent = isPointerEvent(e) ? e : null;
+      state.pointerIdentifier = pointerEvent ? pointerEvent.pointerId : null;
+      const touchIdentifier = state.pointerIdentifier == null ? (0, _domFns.getTouchIdentifier)(e) : null;
       state.touchIdentifier = touchIdentifier;
       // Get the current drag point from the event. This is used as the offset.
       const position = (0, _positionFns.getControlPosition)(e, {
@@ -275,45 +1000,88 @@ var _default = exports.default = (0, _vue.defineComponent)({
       } = position;
 
       // Create an event object with all the data parents need to make a decision here.
-      const coreEvent = (0, _positionFns.createCoreData)({
-        props,
-        findDOMNode,
-        state
-      }, x, y);
-      (0, _log.default)('DraggableCore: handleDragStart: %j', coreEvent);
-
-      // Call event handler. If it returns explicit false, cancel.
-      (0, _log.default)('calling', props.startFn);
-      const shouldUpdate = props.startFn?.(e, coreEvent);
-      if (shouldUpdate === false || state.mounted === false) return;
-
-      // Add a style to the body to disable user-select. This prevents text from
-      // being selected all over the page.
-      if (props.enableUserSelectHack) (0, _domFns.addUserSelectStyles)(ownerDocument);
-
-      // Initiate dragging. Set the current x and y as offsets
-      // so we know how much we've moved during the drag. This allows us
-      // to drag elements around even if they have been moved, without issue.
-      state.dragging = true;
+      draggingNode = thisNode;
+      pendingDragEvent = null;
       state.lastX = x;
       state.lastY = y;
+      lastProcessedX = x;
+      lastProcessedY = y;
+      cancelDragRaf();
+      clearDragStartDelayTimer();
+      clearClickSuppression();
+      dragStartDelayPassed = false;
+      dragStartDelayEvent = null;
+      hasDragged = false;
+      dragStartX = x;
+      dragStartY = y;
+      pendingX = x;
+      pendingY = y;
+      const shouldDelay = (e.type === 'touchstart' || pointerEvent?.pointerType === 'touch') && getDragStartDelay() > 0;
+      pendingDragStart = shouldDelay || getDragStartThreshold() > 0;
+      pendingDragStartMode = shouldDelay ? 'delay' : pendingDragStart ? 'threshold' : null;
+      if (pendingDragStartMode === 'delay') {
+        const delay = getDragStartDelay();
+        dragStartDelayEvent = e;
+        const ownerWindow = ownerDocument.defaultView || window;
+        dragStartDelayOwnerWindow = ownerWindow;
+        dragStartDelayTimerId = ownerWindow.setTimeout(() => {
+          dragStartDelayTimerId = null;
+          dragStartDelayOwnerWindow = null;
+          dragStartDelayPassed = true;
+          if (!pendingDragStart || pendingDragStartMode !== 'delay' || state.dragging || state.mounted === false) return;
+          const nextX = Number.isFinite(pendingX) ? pendingX : dragStartX;
+          const nextY = Number.isFinite(pendingY) ? pendingY : dragStartY;
+          startDrag(dragStartDelayEvent || e, nextX, nextY, {
+            resetLastCoords: true
+          });
+        }, delay);
+      } else if (!pendingDragStart) {
+        const started = startDrag(e, x, y);
+        if (started === false) return false;
+      }
 
       // Add events to the document directly so we catch when the user's mouse/touch moves outside of
       // this element. We use different events depending on whether or not we have detected that this
       // is a touch-capable device.
-      (0, _domFns.addEvent)(ownerDocument, dragEventFor.move, handleDrag);
-      (0, _domFns.addEvent)(ownerDocument, dragEventFor.stop, handleDragStop);
+      const isTouchLike = dragEventFor === eventsFor.touch || dragEventFor === eventsFor.pointer && pointerEvent?.pointerType === 'touch';
+      const touchListenerOptions = isTouchLike ? {
+        passive: false
+      } : undefined;
+      (0, _domFns.addEvent)(ownerDocument, dragEventFor.move, handleDrag, touchListenerOptions);
+      (0, _domFns.addEvent)(ownerDocument, dragEventFor.stop, handleDragStop, touchListenerOptions);
+      if (dragEventFor.cancel) {
+        (0, _domFns.addEvent)(ownerDocument, dragEventFor.cancel, handleDragStop, touchListenerOptions);
+      }
+      if (dragEventFor === eventsFor.pointer && pointerEvent) {
+        trySetPointerCapture(thisNode, pointerEvent.pointerId);
+      }
+    };
+    const onPointerdown = e => {
+      if (!isPointerEvent(e)) return;
+      const thisNode = findDOMNode();
+      if (!thisNode) return;
+      if (!shouldUsePointerEventsForTouch(thisNode, e)) return;
+      if (e.pointerType === 'touch') ignoreTouchStartUntil = Date.now() + 100;
+      dragEventFor = eventsFor.pointer;
+      return handleDragStart(e);
     };
     const onMousedown = e => {
+      const ownerWindow = getOwnerWindow();
+      if (typeof ownerWindow.PointerEvent !== 'undefined') return;
       dragEventFor = eventsFor.mouse; // on touchscreen laptops we could switch back to mouse
-      emit('mousedown', e);
       return handleDragStart(e);
     };
     const onMouseup = e => {
+      const ownerWindow = getOwnerWindow();
+      if (typeof ownerWindow.PointerEvent !== 'undefined') return;
       dragEventFor = eventsFor.mouse;
       return handleDragStop(e);
     };
     const onTouchStart = e => {
+      if (ignoreTouchStartUntil && Date.now() < ignoreTouchStartUntil) {
+        ignoreTouchStartUntil = 0;
+        return;
+      }
       // We're on a touch device now, so change the event handlers
       dragEventFor = eventsFor.touch;
       return handleDragStart(e);
@@ -334,6 +1102,16 @@ var _default = exports.default = (0, _vue.defineComponent)({
     });
     (0, _vue.onUnmounted)(() => {
       state.mounted = false;
+      draggingNode = null;
+      cancelDragRaf();
+      clearDragStartDelayTimer();
+      clearClickSuppression();
+      cancelAutoScrollRaf();
+      releasePointerCapture();
+      state.pointerIdentifier = null;
+      state.touchIdentifier = null;
+      autoScrollContainers = [];
+      autoScrollLastEvent = null;
       // Remove any leftover event handlers. Remove both touch and mouse handlers in case
       // some browser quirk caused a touch event to fire during a mouse move, or vice versa.
       const thisNode = findDOMNode();
@@ -343,25 +1121,57 @@ var _default = exports.default = (0, _vue.defineComponent)({
         } = thisNode;
         (0, _domFns.removeEvent)(ownerDocument, eventsFor.mouse.move, handleDrag);
         (0, _domFns.removeEvent)(ownerDocument, eventsFor.touch.move, handleDrag);
+        (0, _domFns.removeEvent)(ownerDocument, eventsFor.pointer.move, handleDrag);
         (0, _domFns.removeEvent)(ownerDocument, eventsFor.mouse.stop, handleDragStop);
         (0, _domFns.removeEvent)(ownerDocument, eventsFor.touch.stop, handleDragStop);
+        (0, _domFns.removeEvent)(ownerDocument, eventsFor.touch.cancel, handleDragStop);
+        (0, _domFns.removeEvent)(ownerDocument, eventsFor.pointer.stop, handleDragStop);
+        (0, _domFns.removeEvent)(ownerDocument, eventsFor.pointer.cancel, handleDragStop);
         (0, _domFns.removeEvent)(thisNode, eventsFor.touch.start, onTouchStart, {
           passive: false
         });
         if (props.enableUserSelectHack) (0, _domFns.removeUserSelectStyles)(ownerDocument);
       }
     });
+    const getFirstUsableChild = () => {
+      const raw = slots.default ? slots.default() : [];
+      const stack = Array.isArray(raw) ? [...raw] : [raw];
+      while (stack.length) {
+        const item = stack.shift();
+        if (Array.isArray(item)) {
+          for (let i = item.length - 1; i >= 0; i -= 1) stack.unshift(item[i]);
+          continue;
+        }
+        if (!(0, _vue.isVNode)(item)) continue;
+        if (item.type === _vue.Comment) continue;
+        if (item.type === _vue.Text) {
+          const txt = typeof item.children === 'string' ? item.children : '';
+          if (!txt || !txt.trim()) continue;
+          continue;
+        }
+        if (item.type === _vue.Fragment) {
+          const fragChildren = item.children;
+          if (Array.isArray(fragChildren)) {
+            for (let i = fragChildren.length - 1; i >= 0; i -= 1) stack.unshift(fragChildren[i]);
+          }
+          continue;
+        }
+        return item;
+      }
+      return null;
+    };
     return () => {
-      const child = slots.default ? slots.default()[0] : null;
+      const child = getFirstUsableChild();
       if (!child) return null;
-      // 判断child.type是否是一个组件
-      const isComponent = typeof child.type === 'object' && 'name' in child.type;
       // const clonedChildren = isVNode(child) ? cloneVNode(child, { onMousedown, onMouseup, onTouchend, ref: props.nodeRef || rootElement }) : child;
+      const safeRef = props.nodeRef;
+      const vnodeRef = isRefLike(safeRef) ? safeRef : rootElement;
       const clonedChildren = (0, _vue.isVNode)(child) ? (0, _vue.cloneVNode)(child, {
+        onPointerdown,
         onMousedown,
         onMouseup,
         onTouchend,
-        ref: props.nodeRef || rootElement
+        ref: vnodeRef
       }) : child;
       // const clonedChildren = isVNode(child) ? cloneVNode(child, {}) : child;