diff --git a/packages/moveable/src/MoveableManager.tsx b/packages/moveable/src/MoveableManager.tsx index 294f9a0eb..36c052361 100644 --- a/packages/moveable/src/MoveableManager.tsx +++ b/packages/moveable/src/MoveableManager.tsx @@ -91,12 +91,12 @@ class MoveableManager extends EventEmitter { 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 index ab8a54beb..cf38960d1 100644 --- a/packages/react-moveable/src/InitialMoveable.tsx +++ b/packages/react-moveable/src/InitialMoveable.tsx @@ -260,7 +260,7 @@ export class InitialMoveable * @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 index f520e4613..8f73461bb 100644 --- a/packages/react-moveable/src/MoveableIndividualGroup.tsx +++ b/packages/react-moveable/src/MoveableIndividualGroup.tsx @@ -88,8 +88,8 @@ class MoveableIndividualGroup extends MoveableManager { const target = child.getTargets()[0]; const controlBoxElement = child.getControlBoxElement(); @@ -104,7 +104,7 @@ class MoveableIndividualGroup extends MoveableManager * } * }); */ - 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 index f763a7844..be53a5a53 100644 --- 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 index 3c7cd7307..f2cd44f5a 100644 --- 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;