refactor: let the target be passed into dragStart

The event.target changes in asynchronous calls. It is therefore necessary to save the target at the desired time instance and pass it to dragStart.
daybrush · Nov 20, 2023 · 12c45bd · 12c45bd
1 parent 9f4c9f4
commit 12c45bd
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 12 deletions.
diff --git a/packages/moveable/src/MoveableManager.tsx b/packages/moveable/src/MoveableManager.tsx
@@ -91,12 +91,12 @@ class MoveableManager extends EventEmitter<MoveableEventsParameters> {
     public forceUpdate(callback?: () => any) {
         this.innerMoveable!.forceUpdate(callback);
     }
-    public dragStart(e: MouseEvent | TouchEvent) {
+    public dragStart(e: MouseEvent | TouchEvent, target: EventTarget | null = e.target) {
         const innerMoveable = this.innerMoveable;
         if ((innerMoveable as any).$_timer) {
             this.forceUpdate();
         }
-        this.getMoveable().dragStart(e);
+        this.getMoveable().dragStart(e, target);
     }
     public destroy() {
         const selfElement = this.selfElement!;

diff --git a/packages/react-moveable/src/InitialMoveable.tsx b/packages/react-moveable/src/InitialMoveable.tsx
@@ -260,7 +260,7 @@ export class InitialMoveable<T = {}>
      * @example
      * document.querySelector(".target").addEventListener("mousedown", e => {
      *   moveable.waitToChangeTarget().then(() => {
-     *      moveable.dragStart(e.currentTarget);
+     *      moveable.dragStart(e, e.currentTarget);
      *   });
      *   moveable.target = e.currentTarget;
      * });

diff --git a/packages/react-moveable/src/MoveableIndividualGroup.tsx b/packages/react-moveable/src/MoveableIndividualGroup.tsx
@@ -88,8 +88,8 @@ class MoveableIndividualGroup extends MoveableManager<GroupableProps & Individua
         };
         return requestInstant ? requester.request(param).requestEnd() : requester;
     }
-    public dragStart(e: MouseEvent | TouchEvent) {
-        const inputTarget = e.target as HTMLElement;
+    public dragStart(e: MouseEvent | TouchEvent, target: EventTarget | null = e.target) {
+        const inputTarget = target as HTMLElement;
         const childMoveable = find(this.moveables, child => {
             const target = child.getTargets()[0];
             const controlBoxElement = child.getControlBoxElement();
@@ -104,7 +104,7 @@ class MoveableIndividualGroup extends MoveableManager<GroupableProps & Individua
         });
 
         if (childMoveable) {
-            childMoveable.dragStart(e);
+            childMoveable.dragStart(e, target);
         }
         return this;
     }

diff --git a/packages/react-moveable/src/MoveableManager.tsx b/packages/react-moveable/src/MoveableManager.tsx
@@ -343,15 +343,15 @@ export default class MoveableManager<T = {}>
      *     }
      * });
      */
-    public dragStart(e: MouseEvent | TouchEvent) {
+    public dragStart(e: MouseEvent | TouchEvent, target: EventTarget | null = e.target) {
         const targetGesto = this.targetGesto;
         const controlGesto = this.controlGesto;
 
-        if (targetGesto && checkMoveableTarget(this)({ inputEvent: e })) {
+        if (targetGesto && checkMoveableTarget(this)({ inputEvent: e }, target)) {
             if (!targetGesto.isFlag()) {
                 targetGesto.triggerDragStart(e);
             }
-        } else if (controlGesto && this.isMoveableElement(e.target as Element)) {
+        } else if (controlGesto && this.isMoveableElement(target as Element)) {
             if (!controlGesto.isFlag()) {
                 controlGesto.triggerDragStart(e);
             }

diff --git a/packages/react-moveable/src/gesto/getAbleGesto.ts b/packages/react-moveable/src/gesto/getAbleGesto.ts
@@ -201,8 +201,8 @@ export function triggerAble(
 }
 
 export function checkMoveableTarget(moveable: MoveableManagerInterface) {
-    return (e: { inputEvent: Event }) => {
-        const eventTarget = e.inputEvent.target as Element;
+    return (e: { inputEvent: Event }, target: EventTarget | null = e.inputEvent.target) => {
+        const eventTarget = target as Element;
         const areaElement = moveable.areaElement;
         const dragTargetElement = (moveable as any)._dragTarget;
 

diff --git a/packages/react-moveable/src/types.ts b/packages/react-moveable/src/types.ts
@@ -3435,7 +3435,7 @@ export interface MoveableInterface {
      */
     getDragElement(): HTMLElement | SVGElement | null | undefined;
     destroy(): void;
-    dragStart(e: MouseEvent | TouchEvent): void;
+    dragStart(e: MouseEvent | TouchEvent, target?: EventTarget | null): void;
     isInside(clientX: number, clientY: number): boolean;
     isDragging(ableName?: string): boolean;
     hitTest(el: Element | HitRect): number;