fix: fix dragtarget #468

daybrush · Sep 15, 2022 · c662cca · c662cca
1 parent 05abcfc
commit c662cca
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 2 deletions.
diff --git a/packages/react-moveable/src/react-moveable/gesto/getAbleGesto.ts b/packages/react-moveable/src/react-moveable/gesto/getAbleGesto.ts
@@ -166,18 +166,20 @@ export function getTargetAbleGesto(
 ) {
     const controlBox = moveable.controlBox.getElement();
     const targets: Array<HTMLElement | SVGElement> = [];
+    const dragTarget = moveable.props.dragTarget;
 
     targets.push(controlBox);
 
-    if (!moveable.props.dragArea || moveable.props.dragTarget) {
+    if (!moveable.props.dragArea || dragTarget) {
         targets.push(moveableTarget);
     }
 
     const startFunc = (e: any) => {
         const eventTarget = e.inputEvent.target;
         const areaElement = moveable.areaElement;
 
-        return eventTarget === areaElement
+        return dragTarget && (eventTarget === dragTarget || dragTarget.contains(eventTarget))
+            || eventTarget === areaElement
             || (!moveable.isMoveableElement(eventTarget) && !moveable.controlBox.getElement().contains(eventTarget))
             || hasClass(eventTarget, "moveable-area")
             || hasClass(eventTarget, "moveable-padding");
@@ -222,6 +224,7 @@ export function getAbleGesto(
 
     ["drag", "pinch"].forEach(eventOperation => {
         ["Start", "", "End"].forEach(eventType => {
+
             gesto.on(`${eventOperation}${eventType}` as any, e => {
                 const eventName = e.eventType;
 

diff --git a/packages/react-moveable/stories/99-Tests/Deafult.stories.tsx b/packages/react-moveable/stories/99-Tests/Deafult.stories.tsx
@@ -71,3 +71,7 @@ group.add("Test overflow: auto target", {
     app: require("./ReactOverflowApp").default,
     text: require("!!raw-loader!./ReactOverflowApp").default,
 });
+group.add("Test Drag Target", {
+    app: require("./ReactDragTargetApp").default,
+    text: require("!!raw-loader!./ReactDragTargetApp").default,
+});
diff --git a/packages/react-moveable/stories/99-Tests/ReactDragTargetApp.tsx b/packages/react-moveable/stories/99-Tests/ReactDragTargetApp.tsx
@@ -0,0 +1,64 @@
+import * as React from "react";
+import Moveable, { MoveableManagerInterface, Renderer } from "@/react-moveable";
+
+const DimensionViewable = {
+    name: "dimensionViewable",
+    props: {},
+    events: {},
+    render(moveable: MoveableManagerInterface<any, any>, React: Renderer) {
+        const rect = moveable.getRect();
+
+        // Add key (required)
+        // Add class prefix moveable-(required)
+        return <div key={"dimension-viewer"} className={"moveable-dimension"} style={{
+            position: "absolute",
+            left: `${rect.width / 2}px`,
+            top: `${rect.height + 20}px`,
+            background: "#4af",
+            borderRadius: "2px",
+            padding: "2px 4px",
+            color: "white",
+            fontSize: "13px",
+            whiteSpace: "nowrap",
+            fontWeight: "bold",
+            willChange: "transform",
+            transform: `translate(-50%, 0px)`,
+        }}>
+            Target
+        </div>;
+    },
+} as const;
+
+export default function App() {
+    const targetRef = React.useRef<HTMLDivElement>(null);
+    const [dragTarget, setDragTarget] = React.useState<HTMLElement>();
+
+    React.useEffect(() => {
+        setDragTarget(document.querySelector<HTMLElement>(".moveable-dimension")!);
+    }, []);
+    return <div className="container">
+        <div className="target" ref={targetRef}></div>
+        <Moveable
+            target={targetRef}
+            ables={[DimensionViewable]}
+            draggable={true}
+            resizable={true}
+            rotatable={true}
+            dragTarget={dragTarget}
+            props={{
+                dimensionViewable: true,
+            }}
+            onDrag={e => {
+                e.target.style.transform = e.transform;
+            }}
+            onResize={e => {
+                e.target.style.width = `${e.width}px`;
+                e.target.style.height = `${e.height}px`;
+                e.target.style.transform = e.drag.transform;
+            }}
+            onRotate={e => {
+                e.target.style.transform = e.drag.transform;
+            }}
+        />
+    </div>;
+}