@ohkit/draggable-box 0.0.2 → 0.0.4

package/src/index.tsx

@@ -4,12 +4,14 @@ import {
   classNames as cx,
 } from "@ohkit/prefix-classname";
 import {addEventListener, addClass} from '@ohkit/dom-helper';
-import {findFixedPositionParent, findAbsolutePositionParent, getScaleRatio, clamp} from './utils';
+import {findFixedPositionParent, findAbsolutePositionParent, getScaleRatio, clamp, supportsTouchEvents} from './utils';
 import {ValidPlacement} from './constants';
 import {DraggableBoxProps, DraggableBoxState} from './type';
 
 import './style.scss';
 
+export * from './utils';
+export * from './type';
 export const c = p("ohkit-draggable-box__");
 export class DraggableBox extends React.Component<DraggableBoxProps, DraggableBoxState> {
     static defaultProps: Partial<DraggableBoxProps> = {
@@ -20,22 +22,26 @@ export class DraggableBox extends React.Component<DraggableBoxProps, DraggableBo
         disabled: false,
         lockAxis: 'none',
         showDragArea: false,
+        showDragAreaOverMoveDistanse: 5,
         positionMode: 'fixed',
     };
 
     constructor(props: DraggableBoxProps) {
         super(props);
-        
-        const { placement = 'bottom-right', offsetY = 20, offsetX = 20 } = props;
+        const { offsetX, offsetY } = this.props;
+        this.state = this.formatState({offsetX, offsetY});
+    }
+
+    private formatState({offsetX = DraggableBox.defaultProps.offsetX, offsetY = DraggableBox.defaultProps.offsetY} = {}) {
+        const { placement = 'bottom-right' } = this.props;
         const [placementY, placementX] = placement.split('-') as ['top' | 'bottom', 'left' | 'right'];
-        
-        // 简化状态初始化
-        this.state = {
+        const newState = {
             top: placementY === 'top' ? offsetY : undefined,
             bottom: placementY === 'bottom' ? offsetY : undefined,
             left: placementX === 'left' ? offsetX : undefined,
             right: placementX === 'right' ? offsetX : undefined,
-        };
+        }
+        return newState;
     }
 
     private prePositionMode: DraggableBoxProps['positionMode'];
@@ -64,8 +70,8 @@ export class DraggableBox extends React.Component<DraggableBoxProps, DraggableBo
         const container = this.getContainer(false);
         if (!container) {
             return {
-                width: window.innerWidth,
-                height: window.innerHeight,
+                width: document.documentElement.clientWidth, // window.innerWidth, 避免滚动条影响计算
+                height: document.documentElement.clientHeight, // window.innerHeight, 避免滚动条影响计算
                 left: 0,
                 top: 0,
                 scrollLeft: 0,
@@ -216,20 +222,25 @@ export class DraggableBox extends React.Component<DraggableBoxProps, DraggableBo
     dY = 0;
     startTop = 0;
     startLeft = 0;
+    startBottom = 0;
+    startRight = 0;
+    translateX = 0;
+    translateY = 0;
 
     // 缓存缩放比例，避免在 dragging 中频繁计算
     cachedScaleX = 1;
     cachedScaleY = 1;
 
-    __moveDisposer?: () => void;
-    __clickDisposer?: () => void;
-    __bodyClassDisposer?: () => void;
-    __upDisposer?: () => void;
-    __resizeDisposer?: () => void;
+    private __moveDisposer?: () => void;
+    private __clickDisposer?: () => void;
+    private __bodyClassDisposer?: () => void;
+    private __upDisposer?: () => void;
+    private __resizeDisposer?: () => void;
+    private __preventScrollDisposer?: () => void;
 
     dragAreaRef: HTMLDivElement | null = null;
 
-    reportStartPosition() {
+    private reportStartPosition() {
         if (this.draggerRef) {
             // 获取缩放比例
             const { scaleX, scaleY } = getScaleRatio(this.getContainer());
@@ -242,18 +253,24 @@ export class DraggableBox extends React.Component<DraggableBoxProps, DraggableBo
             // 计算相对于容器的位置，并除以缩放比例得到未缩放的坐标
             this.startTop = top / scaleY - containerRect.top + containerRect.scrollTop - containerRect.borderTopWidth;
             this.startLeft = left / scaleY - containerRect.left + containerRect.scrollLeft - containerRect.borderLeftWidth;
+            this.startBottom = containerRect.height - this.startTop - this.dragBoxSize.height;
+            this.startRight = containerRect.width - this.startLeft - this.dragBoxSize.width;
         }
     }
 
-    enableDrag = () => {
+    enableDrag = (isTouch = false) => {
         this.reportStartPosition();
         this.__moveDisposer?.();
-        this.__moveDisposer = addEventListener(document, 'mousemove', (evt) => {
+        this.__moveDisposer = addEventListener(isTouch && this.draggerRef ? this.draggerRef : document, isTouch ? 'touchmove' : 'mousemove', (evt) => {
+            evt.stopPropagation();
+            if (isTouch) {
+                evt.preventDefault();
+            }
             // INFO: 移动过程中禁止click事件
             if (!this.__clickDisposer) {
                 const moveDistanse = Math.sqrt(Math.pow(this.dX, 2) + Math.pow(this.dY, 2));
-                // INFO: 移动超过5px？？ 确保用户有真实的移动意愿，而不是手抖～～
-                if (moveDistanse > 5) {
+                // INFO: 移动超过px？？ 确保用户有真实的移动意愿，而不是手抖～～
+                if (moveDistanse > (this.props.showDragAreaOverMoveDistanse || 5)) {
                     this.__clickDisposer = addEventListener(
                         document,
                         'click',
@@ -270,17 +287,29 @@ export class DraggableBox extends React.Component<DraggableBoxProps, DraggableBo
                     }
                 }
             }
-            this.dragging(evt);
-        }, true);
+            // 调用拖拽开始回调
+            if (!this.isDragging && this.props.onDragStart) {
+                const positionChange = {
+                    top: this.startTop,
+                    left: this.startLeft,
+                    bottom: this.startBottom,
+                    right: this.startRight,
+                    diffX: 0,
+                    diffY: 0
+                };
+                this.props.onDragStart(positionChange);
+            }
+            this.dragging(evt as TouchEvent | MouseEvent);
+        }, {
+            passive: !isTouch
+        });
 
         this.__upDisposer?.();
         this.__upDisposer = addEventListener(
             document,
             'mouseup',
-            (evt) => {
+            () => {
                 this.endDrag();
-                evt.stopPropagation();
-                evt.preventDefault();
             },
             true
         );
@@ -294,11 +323,11 @@ export class DraggableBox extends React.Component<DraggableBoxProps, DraggableBo
         this.axisX = evt.nativeEvent.pageX;
         this.axisY = evt.nativeEvent.pageY;
         if (!this.props.disabled) {
-          this.enableDrag();
+            this.enableDrag();
         }
     };
 
-    dragging = (evt: MouseEvent) => {
+    dragging = (evt: MouseEvent | TouchEvent) => {
         this.isDragging = true;
         const { lockAxis } = this.props;
         const { minX, maxX, minY, maxY } = this.dragPositionBoundaries;
@@ -307,9 +336,21 @@ export class DraggableBox extends React.Component<DraggableBoxProps, DraggableBo
         const scaleX = this.cachedScaleX;
         const scaleY = this.cachedScaleY;
         
+        // 获取坐标
+        let pageX: number, pageY: number;
+        if (evt instanceof TouchEvent) {
+            const touch = evt.touches[0];
+            if (!touch) return;
+            pageX = touch.pageX;
+            pageY = touch.pageY;
+        } else {
+            pageX = evt.pageX;
+            pageY = evt.pageY;
+        }
+        
         // 计算原始偏移量（需要除以缩放比例）
-        this.dX = (evt.pageX - (this.axisX || 0)) / scaleX;
-        this.dY = (evt.pageY - (this.axisY || 0)) / scaleY;
+        this.dX = (pageX - (this.axisX || 0)) / scaleX;
+        this.dY = (pageY - (this.axisY || 0)) / scaleY;
         
         // 应用方向锁定并计算变换值
         let translateX = this.dX;
@@ -342,16 +383,45 @@ export class DraggableBox extends React.Component<DraggableBoxProps, DraggableBo
                 translateY = maxY - this.startTop;
             }
         }
+        if (this.translateX === translateX && this.translateY === translateY) {
+            return;
+        }
+
+        // 调用拖拽中回调
+        if (this.props.onDrag) {
+            const positionChange = {
+                top: this.startTop + translateY,
+                left: this.startLeft + translateX,
+                bottom: this.startBottom - translateY,
+                right: this.startRight - translateX,
+                diffX: translateX,
+                diffY: translateY
+            };
+            this.props.onDrag(positionChange);
+        }
         
         if (this.draggerRef) {
             this.draggerRef.style.transform = `translate(${translateX}px, ${translateY}px)`;
         }
-        evt.stopPropagation();
+        this.translateX = translateX;
+        this.translateY = translateY;
+    };
+
+    startTouchDrag = (evt: React.TouchEvent<HTMLDivElement>) => {
+        const touch = evt.touches[0];
+        if (!touch) return;
+        this.axisX = touch.pageX;
+        this.axisY = touch.pageY;
+        if (!this.props.disabled) {
+            this.enableDrag(true);
+        }
     };
 
     endDrag = () => {
         if (this.isDragging) {
-            this.calcPosition();
+            const positionChange = this.calcPosition();
+            // 调用拖拽结束回调
+            this.props.onDragEnd?.(positionChange);
             if (this.draggerRef) {
                 this.draggerRef.style.transform = '';
             }
@@ -362,8 +432,10 @@ export class DraggableBox extends React.Component<DraggableBoxProps, DraggableBo
             }
         }
 
-        this.__moveDisposer?.();
-        this.__moveDisposer = undefined;
+        if (this.__moveDisposer) {
+            this.__moveDisposer();
+            this.__moveDisposer = undefined;
+        }
         if (this.__clickDisposer) {
           requestAnimationFrame(() => {
             if (this.__clickDisposer) {
@@ -372,10 +444,14 @@ export class DraggableBox extends React.Component<DraggableBoxProps, DraggableBo
             }
           });
         }
-        this.__upDisposer?.();
-        this.__upDisposer = undefined;
-        this.__bodyClassDisposer?.();
-        this.__bodyClassDisposer = undefined;
+        if (this.__upDisposer) {
+            this.__upDisposer();
+            this.__upDisposer = undefined;
+        }
+        if (this.__bodyClassDisposer) {
+            this.__bodyClassDisposer();
+            this.__bodyClassDisposer = undefined;
+        }
 
         this.isDragging = false;
     };
@@ -441,8 +517,6 @@ export class DraggableBox extends React.Component<DraggableBoxProps, DraggableBo
         const realBottom = height - realTop - this.dragBoxSize.height;
         const realRight = width - realLeft - this.dragBoxSize.width;
         if (realTop !== this.state.top || realLeft !== this.state.left || this.state.bottom !== realBottom || this.state.right !== realRight) {
-            // console.log(minY, maxY, this.startTop, this.dY, newTop, realTop, 'minY, maxY, this.startTop, this.dY, newTop, realTop --- calcPosition y');
-            // console.log(minX, maxX, this.startLeft, this.dX, newLeft, realLeft, 'minX, maxX, this.startLeft, this.dX, newLeft, realLeft ---calcPosition x');
             this.setState({
                 top: realTop,
                 left: realLeft,
@@ -450,11 +524,29 @@ export class DraggableBox extends React.Component<DraggableBoxProps, DraggableBo
                 right: realRight
             });
         }
+        const positionChange = {
+            top: realTop,
+            left: realLeft,
+            bottom: realBottom,
+            right: realRight,
+            diffX: realLeft - this.startLeft,
+            diffY: realTop - this.startTop
+        };
         this.startTop = realTop;
         this.startLeft = realLeft;
+        this.startBottom = realBottom;
+        this.startRight = realRight;
         this.dX = this.dY = 0;
+        return positionChange;
     };
 
+    // 更新状态并计算位置 (外部可以调用)
+    updateState = ({offsetX, offsetY}: Pick<DraggableBoxProps, 'offsetX' | 'offsetY'> = {}) => {
+        this.setState(this.formatState({offsetX, offsetY}), () => {
+            this.reportStartPosition();
+            this.calcPosition();
+        });
+    }
 
     componentDidMount() {
         // 检查初始位置是否在边界范围内，如果不在则修正
@@ -464,6 +556,13 @@ export class DraggableBox extends React.Component<DraggableBoxProps, DraggableBo
         this.__resizeDisposer = addEventListener(window, 'resize', () => {
             this.calcPosition();
         });
+
+        // 触屏设备时，阻止拖拽时滚动页面
+        if (supportsTouchEvents() && this.draggerRef) {
+            this.__preventScrollDisposer = addEventListener(this.draggerRef, 'touchmove', (evt) => {
+                evt.preventDefault();
+            });
+        }
     }
 
     componentWillUnmount() {
@@ -472,18 +571,19 @@ export class DraggableBox extends React.Component<DraggableBoxProps, DraggableBo
         this.__moveDisposer?.();
         this.__clickDisposer?.();
         this.__upDisposer?.();
+        this.__preventScrollDisposer?.();
     }
 
     render() {
         const { className, zIndex, children, showDragArea, positionMode = 'fixed' } = this.props;
-        const { startDrag, endDrag } = this;
+        const { startDrag, startTouchDrag, endDrag } = this;
         const stl = {
             zIndex,
             ...this.position,
             position: positionMode
         };
         return (
-            <>
+            <React.Fragment>
                 {showDragArea && (
                     <div
                         className={c('drag-area')}
@@ -508,14 +608,14 @@ export class DraggableBox extends React.Component<DraggableBoxProps, DraggableBo
                     ref={(r) => {
                         this.draggerRef = r;
                     }}
-                    onMouseDown={startDrag}
-                    onMouseUp={endDrag}
+                    onMouseDownCapture={startDrag}
+                    onMouseUpCapture={endDrag}
+                    onTouchStartCapture={startTouchDrag}
+                    onTouchEndCapture={endDrag}
                 >
                     {children}
                 </div>
-            </>
+            </React.Fragment>
         );
     }
 }
-
-export default DraggableBox;

package/src/type.ts

@@ -1,5 +1,14 @@
 import type {ValidPlacement} from './constants';
 
+export interface IPositionChange {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+  diffX: number;
+  diffY: number;
+}
+
 export interface DraggableBoxProps {
   className?: string;
   children?: React.ReactNode;
@@ -51,6 +60,11 @@ export interface DraggableBoxProps {
    * @default false
    */
   showDragArea?: boolean;
+  /**
+   * 拖拽过程中，超出多少px时才显示拖拽区域可视化
+   * @default 5
+   */
+  showDragAreaOverMoveDistanse?: number;
   /**
    * 定位模式
    * 'fixed' - 使用 fixed 定位（默认），动态查找影响 fixed 定位的父元素
@@ -58,6 +72,18 @@ export interface DraggableBoxProps {
    * @default 'fixed'
    */
   positionMode?: 'fixed' | 'absolute';
+  /**
+   * 拖拽开始回调函数
+   */
+  onDragStart?: (positionChange: IPositionChange) => void;
+  /**
+   * 拖拽中回调函数
+   */
+  onDrag?: (positionChange: IPositionChange) => void;
+  /**
+   * 拖拽结束回调函数
+   */
+  onDragEnd?: (positionChange: IPositionChange) => void;
 }
 
 export interface DraggableBoxState {

package/src/utils.ts

@@ -86,3 +86,13 @@ export function getScaleRatio(dom?: HTMLElement | null): { scaleX: number; scale
 export function clamp(value: number, min: number, max: number) {
     return Math.min(Math.max(value, min), max);
 }
+
+
+/**
+ * 检测当前环境是否支持触摸事件
+ * 
+ * @returns 如果环境支持触摸事件返回 true，否则返回 false
+ */
+export function supportsTouchEvents() {
+    return typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0);
+};