refactor: let the target be passed into dragStart (#1050)

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 26, 2023 · 786fc0c · 786fc0c
1 parent 6cd5114
commit 786fc0c
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
@@ -3447,7 +3447,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;