@ohkit/draggable-box 0.0.4 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"index.umd.js","sources":["../src/utils.ts","../src/constants.ts","../src/index.tsx"],"sourcesContent":["import {findParent} from '@ohkit/dom-helper';\n\n/**\n * 检查元素是否创建了新的定位上下文(包含块)\n * @param element 要检查的元素\n * @param includePosition 是否检查position属性(absolute/relative/fixed)\n */\nexport function isPositioningContextCreator(element: HTMLElement, includePosition: boolean): boolean {\n const style = window.getComputedStyle(element);\n const position = style.getPropertyValue('position');\n const transform = style.getPropertyValue('transform');\n const filter = style.getPropertyValue('filter');\n const perspective = style.getPropertyValue('perspective');\n const contain = style.getPropertyValue('contain');\n const willChange = style.getPropertyValue('will-change');\n \n return (includePosition && position !== 'static') || \n transform !== 'none' || \n filter !== 'none' || \n perspective !== 'none' ||\n contain.includes('paint') ||\n contain.includes('layout') ||\n contain.includes('strict') ||\n willChange.includes('transform') ||\n willChange.includes('perspective') ||\n willChange.includes('filter');\n}\n\n/**\n * 查找影响 fixed 定位的父元素\n * 当父元素有 transform/filter/perspective/contain/will-change 等属性时,fixed 定位会相对于该父元素\n */\nexport function findFixedPositionParent(dom?: HTMLElement | null) {\n if (!dom) {\n return document.documentElement;\n }\n const fixedPositionParent = findParent(dom, (parent) => {\n return isPositioningContextCreator(parent, false);\n }, {excludeOwn: true}); // 没有找到,返回 window(通过 document.documentElement)\n return fixedPositionParent;\n}\n\n/**\n * 查找 absolute 定位的父元素\n * 查找最近的包含块创建者,包含所有可能影响absolute定位的属性\n */\nexport function findAbsolutePositionParent(dom?: HTMLElement | null) {\n if (!dom) {\n return document.body;\n }\n return findParent(dom, (parent) => {\n return isPositioningContextCreator(parent, true);\n }, {excludeOwn: true});\n}\n\n/**\n * 获取容器的缩放比例\n * 通过比较元素的实际尺寸和 getBoundingClientRect 返回的尺寸来计算缩放比例\n */\nexport function getScaleRatio(dom?: HTMLElement | null): { scaleX: number; scaleY: number } {\n if (!dom) {\n return { scaleX: 1, scaleY: 1 };\n }\n // 通过比较 offsetWidth 和 getBoundingClientRect().width 来获取缩放比例\n const rect = dom.getBoundingClientRect();\n let scaleX = 1;\n let scaleY = 1;\n // 扩大{magnification}倍进行计算, 相当于保留小数点后4位\n const magnification = 10000;\n scaleX = dom.offsetWidth > 0 ? Math.round(rect.width / dom.offsetWidth * magnification) / magnification : 1;\n scaleY = dom.offsetHeight > 0 ? Math.round(rect.height / dom.offsetHeight * magnification) / magnification : 1;\n // console.log('rect.width dom.offsetWidth', rect.width, dom.offsetWidth);\n // console.log('rect.height dom.offsetHeight', rect.height, dom.offsetHeight);\n // console.log('scaleX', scaleX, 'scaleY', scaleY);\n return { scaleX, scaleY };\n}\n\n/**\n * 限制数值在指定范围内\n * \n * @param value 要限制的数值\n * @param min 最小值\n * @param max 最大值\n * @returns 限制后的数值,确保在 [min, max] 范围内\n */\nexport function clamp(value: number, min: number, max: number) {\n return Math.min(Math.max(value, min), max);\n}\n\n\n/**\n * 检测当前环境是否支持触摸事件\n * \n * @returns 如果环境支持触摸事件返回 true,否则返回 false\n */\nexport function supportsTouchEvents() {\n return typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0);\n};","\nexport const ValidPlacement = ['top-left', 'top-right', 'bottom-left', 'bottom-right'] as const;\n","import React from 'react';\nimport {\n prefixClassname as p,\n classNames as cx,\n} from \"@ohkit/prefix-classname\";\nimport {addEventListener, addClass} from '@ohkit/dom-helper';\nimport {findFixedPositionParent, findAbsolutePositionParent, getScaleRatio, clamp, supportsTouchEvents} from './utils';\nimport {ValidPlacement} from './constants';\nimport {DraggableBoxProps, DraggableBoxState} from './type';\n\nimport './style.scss';\n\nexport * from './utils';\nexport * from './type';\nexport const c = p(\"ohkit-draggable-box__\");\nexport class DraggableBox extends React.Component<DraggableBoxProps, DraggableBoxState> {\n static defaultProps: Partial<DraggableBoxProps> = {\n zIndex: 9999,\n offsetX: 20,\n offsetY: 20,\n placement: 'bottom-right',\n disabled: false,\n lockAxis: 'none',\n showDragArea: false,\n showDragAreaOverMoveDistanse: 5,\n positionMode: 'fixed',\n };\n\n constructor(props: DraggableBoxProps) {\n super(props);\n const { offsetX, offsetY } = this.props;\n this.state = this.formatState({offsetX, offsetY});\n }\n\n private formatState({offsetX = DraggableBox.defaultProps.offsetX, offsetY = DraggableBox.defaultProps.offsetY} = {}) {\n const { placement = 'bottom-right' } = this.props;\n const [placementY, placementX] = placement.split('-') as ['top' | 'bottom', 'left' | 'right'];\n const newState = {\n top: placementY === 'top' ? offsetY : undefined,\n bottom: placementY === 'bottom' ? offsetY : undefined,\n left: placementX === 'left' ? offsetX : undefined,\n right: placementX === 'right' ? offsetX : undefined,\n }\n return newState;\n }\n\n private prePositionMode: DraggableBoxProps['positionMode'];\n private preDraggerRef: HTMLElement | null = null;\n private container: HTMLElement | null = null;\n /**\n * 获取定位容器\n * 根据 positionMode 返回对应的定位父元素\n */\n private getContainer(useCache = true) {\n const { positionMode = 'fixed' } = this.props;\n if (!this.container || !useCache || this.prePositionMode !== positionMode || this.preDraggerRef !== this.draggerRef) {\n this.prePositionMode = positionMode;\n this.preDraggerRef = this.draggerRef;\n this.container = positionMode === 'fixed' \n ? findFixedPositionParent(this.draggerRef) \n : findAbsolutePositionParent(this.draggerRef);\n }\n return this.container;\n }\n\n /**\n * 获取容器的尺寸和位置信息\n */\n private getContainerRect() {\n const container = this.getContainer(false);\n if (!container) {\n return {\n width: document.documentElement.clientWidth, // window.innerWidth, 避免滚动条影响计算\n height: document.documentElement.clientHeight, // window.innerHeight, 避免滚动条影响计算\n left: 0,\n top: 0,\n scrollLeft: 0,\n scrollTop: 0,\n scrollerScrollLeft: 0,\n scrollerScrollTop: 0,\n borderLeftWidth: 0,\n borderTopWidth: 0\n };\n }\n const containerRect = container.getBoundingClientRect();\n \n // 获取容器的border宽度(仅 top, left 对坐标计算有影响)\n const containerStyle = window.getComputedStyle(container);\n const borderLeftWidth = parseFloat(containerStyle.borderLeftWidth) || 0;\n const borderTopWidth = parseFloat(containerStyle.borderTopWidth) || 0;\n const borderRightWidth = parseFloat(containerStyle.borderRightWidth) || 0;\n const borderBottomWidth = parseFloat(containerStyle.borderBottomWidth) || 0;\n const yScrollerWidth = container.offsetWidth - container.clientWidth - borderLeftWidth - borderRightWidth;\n const xScrollerHeight = container.offsetHeight - container.clientHeight - borderTopWidth - borderBottomWidth;\n // console.log('yScrollerWidth, xScrollerHeight', yScrollerWidth, xScrollerHeight);\n\n return {\n width: containerRect.width / this.cachedScaleX - borderLeftWidth - borderRightWidth - yScrollerWidth,\n height: containerRect.height / this.cachedScaleY - borderTopWidth - borderBottomWidth - xScrollerHeight,\n left: containerRect.left / this.cachedScaleX,\n top: containerRect.top / this.cachedScaleY,\n scrollLeft: container.scrollLeft,\n scrollTop: container.scrollTop,\n borderLeftWidth: borderLeftWidth,\n borderTopWidth: borderTopWidth,\n };\n }\n\n get dragBoxSize() {\n let width = 0;\n let height = 0;\n if (this.draggerRef) {\n width = this.draggerRef.offsetWidth;\n height = this.draggerRef.offsetHeight;\n }\n return {\n height,\n width\n };\n }\n\n get dragPositionBoundaries() {\n const { boundsX, boundsY, placement = 'bottom-right' } = this.props;\n const dragSize = this.dragBoxSize;\n const {width: containerWidth, height: containerHeight} = this.getContainerRect();\n const [placementY, placementX] = placement.split('-') as ['top' | 'bottom', 'left' | 'right'];\n \n const defaultBounds = {\n minX: 0,\n maxX: Math.max(containerWidth - dragSize.width, 0),\n minY: 0,\n maxY: Math.max(containerHeight- dragSize.height, 0),\n };\n // 初始化边界\n let {minX, maxX, minY, maxY} = defaultBounds\n\n // 处理X轴边界\n if (boundsX) {\n const [minBound, maxBound] = boundsX;\n if (placementX === 'left') {\n // 左边位置:boundsX=[左边最小距离, 左边最大距离]\n if (minBound !== undefined) minX = Math.max(minX, minBound);\n if (maxBound !== undefined) maxX = Math.min(maxX, maxBound);\n } else {\n // 右边位置:boundsX=[右边最小距离, 右边最大距离]\n // 直接使用边界值作为right的限制\n if (minBound !== undefined && maxBound !== undefined) {\n minX = Math.max(minX, containerWidth - maxBound - dragSize.width);\n maxX = Math.min(maxX, containerWidth - minBound - dragSize.width);\n } else if (minBound !== undefined) {\n // 只有minBound:设置最大边界,最小边界保持默认\n maxX = Math.min(maxX, containerWidth - minBound - dragSize.width);\n } else if (maxBound !== undefined) {\n // 只有maxBound:设置最小边界,最大边界保持默认\n minX = Math.max(minX, containerWidth - maxBound - dragSize.width);\n }\n }\n }\n\n // 处理Y轴边界\n if (boundsY) {\n const [minBound, maxBound] = boundsY;\n \n if (placementY === 'top') {\n // 顶部位置:boundsY=[顶边最小距离, 顶边最大距离]\n if (minBound !== undefined) minY = Math.max(minY, minBound);\n if (maxBound !== undefined) maxY = Math.min(maxY, maxBound);\n } else {\n // 底部位置:boundsY=[底边最小距离, 底边最大距离]\n // 直接使用边界值作为bottom的限制\n if (minBound !== undefined && maxBound !== undefined) {\n minY = Math.max(minY, containerHeight - maxBound - dragSize.height);\n maxY = Math.min(maxY, containerHeight - minBound - dragSize.height);\n } else if (minBound !== undefined) {\n // 只有minBound:设置最大边界,最小边界保持默认\n maxY = Math.min(maxY, containerHeight - minBound - dragSize.height);\n } else if (maxBound !== undefined) {\n // 只有maxBound:设置最小边界,最大边界保持默认\n minY = Math.max(minY, containerHeight - maxBound - dragSize.height);\n }\n }\n }\n // 确保各个边界值在默认范围内\n minX = clamp(minX, defaultBounds.minX, defaultBounds.maxX);\n maxX = clamp(maxX, minX, defaultBounds.maxX);\n minY = clamp(minY, defaultBounds.minY, defaultBounds.maxY);\n maxY = clamp(maxY, minY, defaultBounds.maxY);\n\n return { minX, maxX, minY, maxY };\n }\n\n get curPositionKey() {\n let {placement} = this.props;\n if (!placement || !ValidPlacement.includes(placement)) {\n placement = 'bottom-right';\n }\n return placement.split('-') as ['top' | 'bottom', 'left' | 'right']; // [y, x]\n }\n\n get position() {\n const [y, x] = this.curPositionKey;\n const positionStyles: Record<string, string> = {};\n \n // 确保位置值存在且是有效的数字\n if (this.state[y] !== undefined) {\n positionStyles[y] = `${this.state[y]}px`;\n }\n if (this.state[x] !== undefined) {\n positionStyles[x] = `${this.state[x]}px`;\n }\n \n return positionStyles;\n }\n\n draggerRef: HTMLDivElement | null = null;\n\n isDragging = false;\n\n axisX?: number;\n axisY?: number;\n dX = 0;\n dY = 0;\n startTop = 0;\n startLeft = 0;\n startBottom = 0;\n startRight = 0;\n translateX = 0;\n translateY = 0;\n\n // 缓存缩放比例,避免在 dragging 中频繁计算\n cachedScaleX = 1;\n cachedScaleY = 1;\n\n private __moveDisposer?: () => void;\n private __clickDisposer?: () => void;\n private __bodyClassDisposer?: () => void;\n private __upDisposer?: () => void;\n private __resizeDisposer?: () => void;\n private __preventScrollDisposer?: () => void;\n\n dragAreaRef: HTMLDivElement | null = null;\n\n private reportStartPosition() {\n if (this.draggerRef) {\n // 获取缩放比例\n const { scaleX, scaleY } = getScaleRatio(this.getContainer());\n this.cachedScaleX = scaleX;\n this.cachedScaleY = scaleY;\n const { top, left } = this.draggerRef.getBoundingClientRect();\n const containerRect = this.getContainerRect();\n // console.log(containerRect, 'containerRect');\n \n // 计算相对于容器的位置,并除以缩放比例得到未缩放的坐标\n this.startTop = top / scaleY - containerRect.top + containerRect.scrollTop - containerRect.borderTopWidth;\n this.startLeft = left / scaleY - containerRect.left + containerRect.scrollLeft - containerRect.borderLeftWidth;\n this.startBottom = containerRect.height - this.startTop - this.dragBoxSize.height;\n this.startRight = containerRect.width - this.startLeft - this.dragBoxSize.width;\n }\n }\n\n enableDrag = (isTouch = false) => {\n this.reportStartPosition();\n this.__moveDisposer?.();\n this.__moveDisposer = addEventListener(isTouch && this.draggerRef ? this.draggerRef : document, isTouch ? 'touchmove' : 'mousemove', (evt) => {\n evt.stopPropagation();\n if (isTouch) {\n evt.preventDefault();\n }\n // INFO: 移动过程中禁止click事件\n if (!this.__clickDisposer) {\n const moveDistanse = Math.sqrt(Math.pow(this.dX, 2) + Math.pow(this.dY, 2));\n // INFO: 移动超过px?? 确保用户有真实的移动意愿,而不是手抖~~\n if (moveDistanse > (this.props.showDragAreaOverMoveDistanse || 5)) {\n this.__clickDisposer = addEventListener(\n document,\n 'click',\n (evt) => {\n evt.stopPropagation();\n },\n true\n );\n this.__bodyClassDisposer = addClass([document.body, this.draggerRef], c('moving')) || undefined;\n \n // 显示拖拽区域\n if (this.props.showDragArea && this.dragAreaRef) {\n this.showDragArea();\n }\n }\n }\n // 调用拖拽开始回调\n if (!this.isDragging && this.props.onDragStart) {\n const positionChange = {\n top: this.startTop,\n left: this.startLeft,\n bottom: this.startBottom,\n right: this.startRight,\n diffX: 0,\n diffY: 0\n };\n this.props.onDragStart(positionChange);\n }\n this.dragging(evt as TouchEvent | MouseEvent);\n }, {\n passive: !isTouch\n });\n\n this.__upDisposer?.();\n this.__upDisposer = addEventListener(\n document,\n 'mouseup',\n () => {\n this.endDrag();\n },\n true\n );\n };\n\n startDrag = (evt: React.MouseEvent<HTMLDivElement>) => {\n // 判断鼠标非右击才继续执行\n if (evt.nativeEvent.button === 2) {\n return;\n }\n this.axisX = evt.nativeEvent.pageX;\n this.axisY = evt.nativeEvent.pageY;\n if (!this.props.disabled) {\n this.enableDrag();\n }\n };\n\n dragging = (evt: MouseEvent | TouchEvent) => {\n this.isDragging = true;\n const { lockAxis } = this.props;\n const { minX, maxX, minY, maxY } = this.dragPositionBoundaries;\n \n // 使用缓存的缩放比例,避免频繁计算\n const scaleX = this.cachedScaleX;\n const scaleY = this.cachedScaleY;\n \n // 获取坐标\n let pageX: number, pageY: number;\n if (evt instanceof TouchEvent) {\n const touch = evt.touches[0];\n if (!touch) return;\n pageX = touch.pageX;\n pageY = touch.pageY;\n } else {\n pageX = evt.pageX;\n pageY = evt.pageY;\n }\n \n // 计算原始偏移量(需要除以缩放比例)\n this.dX = (pageX - (this.axisX || 0)) / scaleX;\n this.dY = (pageY - (this.axisY || 0)) / scaleY;\n \n // 应用方向锁定并计算变换值\n let translateX = this.dX;\n let translateY = this.dY;\n \n if (lockAxis === 'x') {\n translateY = 0; // 锁定Y方向\n } else if (lockAxis === 'y') {\n translateX = 0; // 锁定X方向\n }\n \n // 应用边界条件到允许移动的方向\n const potentialLeft = this.startLeft + translateX;\n const potentialTop = this.startTop + translateY;\n \n // X轴边界条件(在允许X轴移动时应用)\n if (lockAxis !== 'y') {\n if (potentialLeft < minX) {\n translateX = minX - this.startLeft;\n } else if (potentialLeft > maxX) {\n translateX = maxX - this.startLeft;\n }\n }\n \n // Y轴边界条件(在允许Y轴移动时应用)\n if (lockAxis !== 'x') {\n if (potentialTop < minY) {\n translateY = minY - this.startTop;\n } else if (potentialTop > maxY) {\n translateY = maxY - this.startTop;\n }\n }\n if (this.translateX === translateX && this.translateY === translateY) {\n return;\n }\n\n // 调用拖拽中回调\n if (this.props.onDrag) {\n const positionChange = {\n top: this.startTop + translateY,\n left: this.startLeft + translateX,\n bottom: this.startBottom - translateY,\n right: this.startRight - translateX,\n diffX: translateX,\n diffY: translateY\n };\n this.props.onDrag(positionChange);\n }\n \n if (this.draggerRef) {\n this.draggerRef.style.transform = `translate(${translateX}px, ${translateY}px)`;\n }\n this.translateX = translateX;\n this.translateY = translateY;\n };\n\n startTouchDrag = (evt: React.TouchEvent<HTMLDivElement>) => {\n const touch = evt.touches[0];\n if (!touch) return;\n this.axisX = touch.pageX;\n this.axisY = touch.pageY;\n if (!this.props.disabled) {\n this.enableDrag(true);\n }\n };\n\n endDrag = () => {\n if (this.isDragging) {\n const positionChange = this.calcPosition();\n // 调用拖拽结束回调\n this.props.onDragEnd?.(positionChange);\n if (this.draggerRef) {\n this.draggerRef.style.transform = '';\n }\n \n // 隐藏拖拽区域\n if (this.props.showDragArea) {\n this.hideDragArea();\n }\n }\n\n if (this.__moveDisposer) {\n this.__moveDisposer();\n this.__moveDisposer = undefined;\n }\n if (this.__clickDisposer) {\n requestAnimationFrame(() => {\n if (this.__clickDisposer) {\n this.__clickDisposer();\n this.__clickDisposer = undefined;\n }\n });\n }\n if (this.__upDisposer) {\n this.__upDisposer();\n this.__upDisposer = undefined;\n }\n if (this.__bodyClassDisposer) {\n this.__bodyClassDisposer();\n this.__bodyClassDisposer = undefined;\n }\n\n this.isDragging = false;\n };\n\n showDragArea = () => {\n if (!this.props.showDragArea || !this.dragAreaRef) return;\n \n const { lockAxis } = this.props;\n const { minX, maxX, minY, maxY } = this.dragPositionBoundaries;\n const dragSize = this.dragBoxSize;\n \n // 重置样式\n this.dragAreaRef.style.border = '1px dashed var(--ohkit-color-primary, #1890ff)';\n this.dragAreaRef.style.backgroundColor = 'rgba(173, 216, 230, 0.2)'; // 淡透蓝色\n \n if (lockAxis === 'x') {\n // 锁定Y方向,显示为水平虚线区域\n this.dragAreaRef.style.width = `${maxX - minX + dragSize.width}px`;\n this.dragAreaRef.style.height = '2px'; // 更细的虚线高度\n this.dragAreaRef.style.left = `${minX}px`;\n this.dragAreaRef.style.top = `${this.startTop + dragSize.height / 2}px`;\n } else if (lockAxis === 'y') {\n // 锁定X方向,显示为垂直虚线区域\n this.dragAreaRef.style.width = '2px'; // 更细的虚线宽度\n this.dragAreaRef.style.height = `${maxY - minY + dragSize.height}px`;\n this.dragAreaRef.style.left = `${this.startLeft + dragSize.width / 2}px`;\n this.dragAreaRef.style.top = `${minY}px`;\n } else {\n // 自由拖拽,显示完整区域\n this.dragAreaRef.style.width = `${maxX - minX + dragSize.width}px`;\n this.dragAreaRef.style.height = `${maxY - minY + dragSize.height}px`;\n this.dragAreaRef.style.left = `${minX}px`;\n this.dragAreaRef.style.top = `${minY}px`;\n }\n \n this.dragAreaRef.style.display = 'block';\n };\n\n hideDragArea = () => {\n if (this.dragAreaRef) {\n this.dragAreaRef.style.display = 'none';\n }\n };\n calcPosition = () => {\n const { lockAxis } = this.props;\n const { minX, maxX, minY, maxY } = this.dragPositionBoundaries;\n const {height, width} = this.getContainerRect();\n \n // 计算新的位置\n let newTop = this.startTop;\n let newLeft = this.startLeft;\n \n if (lockAxis !== 'y') {\n newLeft += this.dX;\n }\n if (lockAxis !== 'x') {\n newTop += this.dY;\n }\n \n // 应用边界限制\n const realTop = clamp(newTop, minY, maxY);\n const realLeft = clamp(newLeft, minX, maxX);\n const realBottom = height - realTop - this.dragBoxSize.height;\n const realRight = width - realLeft - this.dragBoxSize.width;\n if (realTop !== this.state.top || realLeft !== this.state.left || this.state.bottom !== realBottom || this.state.right !== realRight) {\n this.setState({\n top: realTop,\n left: realLeft,\n bottom: realBottom,\n right: realRight\n });\n }\n const positionChange = {\n top: realTop,\n left: realLeft,\n bottom: realBottom,\n right: realRight,\n diffX: realLeft - this.startLeft,\n diffY: realTop - this.startTop\n };\n this.startTop = realTop;\n this.startLeft = realLeft;\n this.startBottom = realBottom;\n this.startRight = realRight;\n this.dX = this.dY = 0;\n return positionChange;\n };\n\n // 更新状态并计算位置 (外部可以调用)\n updateState = ({offsetX, offsetY}: Pick<DraggableBoxProps, 'offsetX' | 'offsetY'> = {}) => {\n this.setState(this.formatState({offsetX, offsetY}), () => {\n this.reportStartPosition();\n this.calcPosition();\n });\n }\n\n componentDidMount() {\n // 检查初始位置是否在边界范围内,如果不在则修正\n this.reportStartPosition();\n this.calcPosition();\n \n this.__resizeDisposer = addEventListener(window, 'resize', () => {\n this.calcPosition();\n });\n\n // 触屏设备时,阻止拖拽时滚动页面\n if (supportsTouchEvents() && this.draggerRef) {\n this.__preventScrollDisposer = addEventListener(this.draggerRef, 'touchmove', (evt) => {\n evt.preventDefault();\n });\n }\n }\n\n componentWillUnmount() {\n this.__resizeDisposer?.();\n this.__bodyClassDisposer?.();\n this.__moveDisposer?.();\n this.__clickDisposer?.();\n this.__upDisposer?.();\n this.__preventScrollDisposer?.();\n }\n\n render() {\n const { className, zIndex, children, showDragArea, positionMode = 'fixed' } = this.props;\n const { startDrag, startTouchDrag, endDrag } = this;\n const stl = {\n zIndex,\n ...this.position,\n position: positionMode\n };\n return (\n <React.Fragment>\n {showDragArea && (\n <div\n className={c('drag-area')}\n ref={(r) => {\n this.dragAreaRef = r;\n }}\n style={{\n display: 'none',\n position: positionMode,\n backgroundColor: 'rgba(173, 216, 230, 0.2)', // 淡透蓝色\n border: '1px dashed var(--ohkit-color-primary, #1890ff)',\n pointerEvents: 'none',\n zIndex: (zIndex || 9999) - 1,\n boxSizing: 'border-box',\n borderRadius: this.props.lockAxis !== 'none' ? '2px' : '0',\n }}\n />\n )}\n <div\n className={cx(c('container'), className)}\n style={stl}\n ref={(r) => {\n this.draggerRef = r;\n }}\n onMouseDownCapture={startDrag}\n onMouseUpCapture={endDrag}\n onTouchStartCapture={startTouchDrag}\n onTouchEndCapture={endDrag}\n >\n {children}\n </div>\n </React.Fragment>\n );\n }\n}\n"],"names":["isPositioningContextCreator","element","includePosition","style","window","getComputedStyle","position","getPropertyValue","transform","filter","perspective","contain","willChange","includes","findFixedPositionParent","dom","findParent","parent","excludeOwn","document","documentElement","findAbsolutePositionParent","body","getScaleRatio","scaleX","scaleY","rect","getBoundingClientRect","magnification","offsetWidth","Math","round","width","offsetHeight","height","clamp","value","min","max","supportsTouchEvents","navigator","maxTouchPoints","ValidPlacement","c","p","DraggableBox","_React$Component","props","_this","call","this","prePositionMode","preDraggerRef","container","draggerRef","isDragging","axisX","axisY","dX","dY","startTop","startLeft","startBottom","startRight","translateX","translateY","cachedScaleX","cachedScaleY","__moveDisposer","__clickDisposer","__bodyClassDisposer","__upDisposer","__resizeDisposer","__preventScrollDisposer","dragAreaRef","enableDrag","isTouch","reportStartPosition","addEventListener","evt","stopPropagation","preventDefault","sqrt","pow","showDragAreaOverMoveDistanse","addClass","undefined","showDragArea","onDragStart","top","left","bottom","right","diffX","diffY","dragging","passive","endDrag","startDrag","nativeEvent","button","pageX","pageY","disabled","lockAxis","_this$dragPositionBou","dragPositionBoundaries","minX","maxX","minY","maxY","TouchEvent","touch","touches","potentialLeft","potentialTop","onDrag","startTouchDrag","positionChange","calcPosition","onDragEnd","hideDragArea","requestAnimationFrame","_this$dragPositionBou2","dragSize","dragBoxSize","border","backgroundColor","display","_this$dragPositionBou3","_this$getContainerRec","getContainerRect","newTop","newLeft","realTop","realLeft","realBottom","realRight","state","setState","updateState","_temp","_ref","formatState","offsetX","offsetY","_this$props","_proto","prototype","_temp2","_ref2","_ref2$offsetX","defaultProps","_ref2$offsetY","_this$props$placement","placement","_placement$split","split","placementY","placementX","getContainer","useCache","_this$props$positionM","positionMode","clientWidth","clientHeight","scrollLeft","scrollTop","scrollerScrollLeft","scrollerScrollTop","borderLeftWidth","borderTopWidth","containerRect","containerStyle","parseFloat","borderRightWidth","borderBottomWidth","_getScaleRatio","_this$draggerRef$getB","componentDidMount","_this2","componentWillUnmount","_this$__resizeDispose","_this$__bodyClassDisp","_this$__moveDisposer","_this$__clickDisposer","_this$__upDisposer","_this$__preventScroll","render","_this3","_this$props2","className","zIndex","children","_this$props2$position","stl","_extends","React","createElement","Fragment","ref","r","pointerEvents","boxSizing","borderRadius","cx","onMouseDownCapture","onMouseUpCapture","onTouchStartCapture","onTouchEndCapture","key","get","_this$props3","boundsX","boundsY","_this$props3$placemen","_this$getContainerRec2","containerWidth","containerHeight","_placement$split2","defaultBounds","minBound","maxBound","_this$curPositionKey","curPositionKey","y","x","positionStyles","Component"],"mappings":"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"}
1
+ {"version":3,"file":"index.umd.js","sources":["../src/utils.ts","../src/constants.ts","../src/index.tsx"],"sourcesContent":["import {findParent} from '@ohkit/dom-helper';\n\n/**\n * 检查元素是否创建了新的定位上下文(包含块)\n * @param element 要检查的元素\n * @param includePosition 是否检查position属性(absolute/relative/fixed)\n */\nexport function isPositioningContextCreator(element: HTMLElement, includePosition: boolean): boolean {\n const style = window.getComputedStyle(element);\n const position = style.getPropertyValue('position');\n const transform = style.getPropertyValue('transform');\n const filter = style.getPropertyValue('filter');\n const perspective = style.getPropertyValue('perspective');\n const contain = style.getPropertyValue('contain');\n const willChange = style.getPropertyValue('will-change');\n \n return (includePosition && position !== 'static') || \n transform !== 'none' || \n filter !== 'none' || \n perspective !== 'none' ||\n contain.includes('paint') ||\n contain.includes('layout') ||\n contain.includes('strict') ||\n willChange.includes('transform') ||\n willChange.includes('perspective') ||\n willChange.includes('filter');\n}\n\n/**\n * 查找影响 fixed 定位的父元素\n * 当父元素有 transform/filter/perspective/contain/will-change 等属性时,fixed 定位会相对于该父元素\n */\nexport function findFixedPositionParent(dom?: HTMLElement | null) {\n if (!dom) {\n return document.documentElement;\n }\n const fixedPositionParent = findParent(dom, (parent) => {\n return isPositioningContextCreator(parent, false);\n }, {excludeOwn: true}); // 没有找到,返回 window(通过 document.documentElement)\n return fixedPositionParent;\n}\n\n/**\n * 查找 absolute 定位的父元素\n * 查找最近的包含块创建者,包含所有可能影响absolute定位的属性\n */\nexport function findAbsolutePositionParent(dom?: HTMLElement | null) {\n if (!dom) {\n return document.body;\n }\n return findParent(dom, (parent) => {\n return isPositioningContextCreator(parent, true);\n }, {excludeOwn: true});\n}\n\n/**\n * 获取容器的缩放比例\n * 通过比较元素的实际尺寸和 getBoundingClientRect 返回的尺寸来计算缩放比例\n */\nexport function getScaleRatio(dom?: HTMLElement | null): { scaleX: number; scaleY: number } {\n if (!dom) {\n return { scaleX: 1, scaleY: 1 };\n }\n // 通过比较 offsetWidth 和 getBoundingClientRect().width 来获取缩放比例\n const rect = dom.getBoundingClientRect();\n let scaleX = 1;\n let scaleY = 1;\n // 扩大{magnification}倍进行计算, 相当于保留小数点后4位\n const magnification = 10000;\n scaleX = dom.offsetWidth > 0 ? Math.round(rect.width / dom.offsetWidth * magnification) / magnification : 1;\n scaleY = dom.offsetHeight > 0 ? Math.round(rect.height / dom.offsetHeight * magnification) / magnification : 1;\n // console.log('rect.width dom.offsetWidth', rect.width, dom.offsetWidth);\n // console.log('rect.height dom.offsetHeight', rect.height, dom.offsetHeight);\n // console.log('scaleX', scaleX, 'scaleY', scaleY);\n return { scaleX, scaleY };\n}\n\n/**\n * 限制数值在指定范围内\n * \n * @param value 要限制的数值\n * @param min 最小值\n * @param max 最大值\n * @returns 限制后的数值,确保在 [min, max] 范围内\n */\nexport function clamp(value: number, min: number, max: number) {\n return Math.min(Math.max(value, min), max);\n}\n\n\n/**\n * 检测当前环境是否支持触摸事件\n * \n * @returns 如果环境支持触摸事件返回 true,否则返回 false\n */\nexport function supportsTouchEvents() {\n return typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0);\n};","\nexport const ValidPlacement = ['top-left', 'top-right', 'bottom-left', 'bottom-right'] as const;\n","import React from 'react';\nimport {\n prefixClassname as p,\n classNames as cx,\n} from \"@ohkit/prefix-classname\";\nimport {addEventListener, addClass} from '@ohkit/dom-helper';\nimport {findFixedPositionParent, findAbsolutePositionParent, getScaleRatio, clamp, supportsTouchEvents} from './utils';\nimport {ValidPlacement} from './constants';\nimport {DraggableBoxProps, DraggableBoxState} from './type';\n\nimport './style.scss';\n\nexport * from './utils';\nexport * from './type';\nexport const c = p(\"ohkit-draggable-box__\");\nexport class DraggableBox extends React.Component<DraggableBoxProps, DraggableBoxState> {\n static defaultProps: Partial<DraggableBoxProps> = {\n zIndex: 9999,\n offsetX: 20,\n offsetY: 20,\n placement: 'bottom-right',\n disabled: false,\n lockAxis: 'none',\n showDragArea: false,\n showDragAreaOverMoveDistanse: 5,\n positionMode: 'fixed',\n };\n\n constructor(props: DraggableBoxProps) {\n super(props);\n const { offsetX, offsetY } = this.props;\n this.state = this.formatState({offsetX, offsetY});\n }\n\n private formatState({offsetX = DraggableBox.defaultProps.offsetX, offsetY = DraggableBox.defaultProps.offsetY} = {}) {\n const { placement = 'bottom-right' } = this.props;\n const [placementY, placementX] = placement.split('-') as ['top' | 'bottom', 'left' | 'right'];\n const newState = {\n top: placementY === 'top' ? offsetY : undefined,\n bottom: placementY === 'bottom' ? offsetY : undefined,\n left: placementX === 'left' ? offsetX : undefined,\n right: placementX === 'right' ? offsetX : undefined,\n }\n return newState;\n }\n\n private prePositionMode: DraggableBoxProps['positionMode'];\n private preDraggerRef: HTMLElement | null = null;\n private container: HTMLElement | null = null;\n /**\n * 获取定位容器\n * 根据 positionMode 返回对应的定位父元素\n */\n private getContainer(useCache = true) {\n const { positionMode = 'fixed' } = this.props;\n if (!this.container || !useCache || this.prePositionMode !== positionMode || this.preDraggerRef !== this.draggerRef) {\n this.prePositionMode = positionMode;\n this.preDraggerRef = this.draggerRef;\n this.container = positionMode === 'fixed' \n ? findFixedPositionParent(this.draggerRef) \n : findAbsolutePositionParent(this.draggerRef);\n }\n return this.container;\n }\n\n /**\n * 获取容器的尺寸和位置信息\n */\n private getContainerRect() {\n const container = this.getContainer(false);\n if (!container) {\n return {\n width: document.documentElement.clientWidth, // window.innerWidth, 避免滚动条影响计算\n height: document.documentElement.clientHeight, // window.innerHeight, 避免滚动条影响计算\n left: 0,\n top: 0,\n scrollLeft: 0,\n scrollTop: 0,\n scrollerScrollLeft: 0,\n scrollerScrollTop: 0,\n borderLeftWidth: 0,\n borderTopWidth: 0\n };\n }\n const containerRect = container.getBoundingClientRect();\n \n // 获取容器的border宽度(仅 top, left 对坐标计算有影响)\n const containerStyle = window.getComputedStyle(container);\n const borderLeftWidth = parseFloat(containerStyle.borderLeftWidth) || 0;\n const borderTopWidth = parseFloat(containerStyle.borderTopWidth) || 0;\n const borderRightWidth = parseFloat(containerStyle.borderRightWidth) || 0;\n const borderBottomWidth = parseFloat(containerStyle.borderBottomWidth) || 0;\n const yScrollerWidth = container.offsetWidth - container.clientWidth - borderLeftWidth - borderRightWidth;\n const xScrollerHeight = container.offsetHeight - container.clientHeight - borderTopWidth - borderBottomWidth;\n // console.log('yScrollerWidth, xScrollerHeight', yScrollerWidth, xScrollerHeight);\n\n return {\n width: containerRect.width / this.cachedScaleX - borderLeftWidth - borderRightWidth - yScrollerWidth,\n height: containerRect.height / this.cachedScaleY - borderTopWidth - borderBottomWidth - xScrollerHeight,\n left: containerRect.left / this.cachedScaleX,\n top: containerRect.top / this.cachedScaleY,\n scrollLeft: container.scrollLeft,\n scrollTop: container.scrollTop,\n borderLeftWidth: borderLeftWidth,\n borderTopWidth: borderTopWidth,\n };\n }\n\n get dragBoxSize() {\n let width = 0;\n let height = 0;\n if (this.draggerRef) {\n width = this.draggerRef.offsetWidth;\n height = this.draggerRef.offsetHeight;\n }\n return {\n height,\n width\n };\n }\n\n get dragPositionBoundaries() {\n const { boundsX, boundsY, placement = 'bottom-right' } = this.props;\n const dragSize = this.dragBoxSize;\n const {width: containerWidth, height: containerHeight} = this.getContainerRect();\n const [placementY, placementX] = placement.split('-') as ['top' | 'bottom', 'left' | 'right'];\n \n const defaultBounds = {\n minX: 0,\n maxX: Math.max(containerWidth - dragSize.width, 0),\n minY: 0,\n maxY: Math.max(containerHeight- dragSize.height, 0),\n };\n // 初始化边界\n let {minX, maxX, minY, maxY} = defaultBounds\n\n // 处理X轴边界\n if (boundsX) {\n const [minBound, maxBound] = boundsX;\n if (placementX === 'left') {\n // 左边位置:boundsX=[左边最小距离, 左边最大距离]\n if (minBound !== undefined) minX = Math.max(minX, minBound);\n if (maxBound !== undefined) maxX = Math.min(maxX, maxBound);\n } else {\n // 右边位置:boundsX=[右边最小距离, 右边最大距离]\n // 直接使用边界值作为right的限制\n if (minBound !== undefined && maxBound !== undefined) {\n minX = Math.max(minX, containerWidth - maxBound - dragSize.width);\n maxX = Math.min(maxX, containerWidth - minBound - dragSize.width);\n } else if (minBound !== undefined) {\n // 只有minBound:设置最大边界,最小边界保持默认\n maxX = Math.min(maxX, containerWidth - minBound - dragSize.width);\n } else if (maxBound !== undefined) {\n // 只有maxBound:设置最小边界,最大边界保持默认\n minX = Math.max(minX, containerWidth - maxBound - dragSize.width);\n }\n }\n }\n\n // 处理Y轴边界\n if (boundsY) {\n const [minBound, maxBound] = boundsY;\n \n if (placementY === 'top') {\n // 顶部位置:boundsY=[顶边最小距离, 顶边最大距离]\n if (minBound !== undefined) minY = Math.max(minY, minBound);\n if (maxBound !== undefined) maxY = Math.min(maxY, maxBound);\n } else {\n // 底部位置:boundsY=[底边最小距离, 底边最大距离]\n // 直接使用边界值作为bottom的限制\n if (minBound !== undefined && maxBound !== undefined) {\n minY = Math.max(minY, containerHeight - maxBound - dragSize.height);\n maxY = Math.min(maxY, containerHeight - minBound - dragSize.height);\n } else if (minBound !== undefined) {\n // 只有minBound:设置最大边界,最小边界保持默认\n maxY = Math.min(maxY, containerHeight - minBound - dragSize.height);\n } else if (maxBound !== undefined) {\n // 只有maxBound:设置最小边界,最大边界保持默认\n minY = Math.max(minY, containerHeight - maxBound - dragSize.height);\n }\n }\n }\n // 确保各个边界值在默认范围内\n minX = clamp(minX, defaultBounds.minX, defaultBounds.maxX);\n maxX = clamp(maxX, minX, defaultBounds.maxX);\n minY = clamp(minY, defaultBounds.minY, defaultBounds.maxY);\n maxY = clamp(maxY, minY, defaultBounds.maxY);\n\n return { minX, maxX, minY, maxY };\n }\n\n get curPositionKey() {\n let {placement} = this.props;\n if (!placement || !ValidPlacement.includes(placement)) {\n placement = 'bottom-right';\n }\n return placement.split('-') as ['top' | 'bottom', 'left' | 'right']; // [y, x]\n }\n\n get position() {\n const [y, x] = this.curPositionKey;\n const positionStyles: Record<string, string> = {};\n \n // 确保位置值存在且是有效的数字\n if (this.state[y] !== undefined) {\n positionStyles[y] = `${this.state[y]}px`;\n }\n if (this.state[x] !== undefined) {\n positionStyles[x] = `${this.state[x]}px`;\n }\n \n return positionStyles;\n }\n\n draggerRef: HTMLDivElement | null = null;\n\n isDragging = false;\n\n axisX?: number;\n axisY?: number;\n dX = 0;\n dY = 0;\n startTop = 0;\n startLeft = 0;\n startBottom = 0;\n startRight = 0;\n translateX = 0;\n translateY = 0;\n\n // 缓存缩放比例,避免在 dragging 中频繁计算\n cachedScaleX = 1;\n cachedScaleY = 1;\n\n private __moveDisposer?: () => void;\n private __clickDisposer?: () => void;\n private __bodyClassDisposer?: () => void;\n private __upDisposer?: () => void;\n private __resizeDisposer?: () => void;\n private __preventScrollDisposer?: () => void;\n\n dragAreaRef: HTMLDivElement | null = null;\n\n private reportStartPosition() {\n if (this.draggerRef) {\n // 获取缩放比例\n const { scaleX, scaleY } = getScaleRatio(this.getContainer());\n this.cachedScaleX = scaleX;\n this.cachedScaleY = scaleY;\n const { top, left } = this.draggerRef.getBoundingClientRect();\n const containerRect = this.getContainerRect();\n // console.log(containerRect, 'containerRect');\n \n // 计算相对于容器的位置,并除以缩放比例得到未缩放的坐标\n this.startTop = top / scaleY - containerRect.top + containerRect.scrollTop - containerRect.borderTopWidth;\n this.startLeft = left / scaleY - containerRect.left + containerRect.scrollLeft - containerRect.borderLeftWidth;\n this.startBottom = containerRect.height - this.startTop - this.dragBoxSize.height;\n this.startRight = containerRect.width - this.startLeft - this.dragBoxSize.width;\n }\n }\n\n dragingClassMap: Record<NonNullable<DraggableBoxProps['lockAxis']>, string> = {\n 'none': 'moving',\n 'x': 'moving-x',\n 'y': 'moving-y'\n }\n\n enableDrag = (isTouch = false) => {\n this.reportStartPosition();\n this.__moveDisposer?.();\n this.__moveDisposer = addEventListener(isTouch && this.draggerRef ? this.draggerRef : document, isTouch ? 'touchmove' : 'mousemove', (evt) => {\n evt.stopPropagation();\n if (isTouch) {\n evt.preventDefault();\n }\n // INFO: 移动过程中禁止click事件\n if (!this.__clickDisposer) {\n const moveDistanse = Math.sqrt(Math.pow(this.dX, 2) + Math.pow(this.dY, 2));\n // INFO: 移动超过px?? 确保用户有真实的移动意愿,而不是手抖~~\n if (moveDistanse > (this.props.showDragAreaOverMoveDistanse || 5)) {\n this.__clickDisposer = addEventListener(\n document,\n 'click',\n (evt) => {\n evt.stopPropagation();\n },\n true\n );\n this.__bodyClassDisposer = addClass([document.documentElement, this.draggerRef], c(this.dragingClassMap[this.props.lockAxis || 'none'])) || undefined;\n \n // 显示拖拽区域\n if (this.props.showDragArea && this.dragAreaRef) {\n this.showDragArea();\n }\n }\n }\n // 调用拖拽开始回调\n if (!this.isDragging && this.props.onDragStart) {\n const positionChange = {\n top: this.startTop,\n left: this.startLeft,\n bottom: this.startBottom,\n right: this.startRight,\n diffX: 0,\n diffY: 0\n };\n this.props.onDragStart(positionChange);\n }\n this.dragging(evt as TouchEvent | MouseEvent);\n }, {\n passive: !isTouch\n });\n\n this.__upDisposer?.();\n this.__upDisposer = addEventListener(\n document,\n 'mouseup',\n () => {\n this.endDrag();\n },\n true\n );\n };\n\n startDrag = (evt: React.MouseEvent<HTMLDivElement>) => {\n // 判断鼠标非右击才继续执行\n if (evt.nativeEvent.button === 2) {\n return;\n }\n this.axisX = evt.nativeEvent.pageX;\n this.axisY = evt.nativeEvent.pageY;\n if (!this.props.disabled) {\n this.enableDrag();\n }\n };\n\n dragging = (evt: MouseEvent | TouchEvent) => {\n this.isDragging = true;\n const { lockAxis } = this.props;\n const { minX, maxX, minY, maxY } = this.dragPositionBoundaries;\n \n // 使用缓存的缩放比例,避免频繁计算\n const scaleX = this.cachedScaleX;\n const scaleY = this.cachedScaleY;\n \n // 获取坐标\n let pageX: number, pageY: number;\n if (evt instanceof TouchEvent) {\n const touch = evt.touches[0];\n if (!touch) return;\n pageX = touch.pageX;\n pageY = touch.pageY;\n } else {\n pageX = evt.pageX;\n pageY = evt.pageY;\n }\n \n // 计算原始偏移量(需要除以缩放比例)\n this.dX = (pageX - (this.axisX || 0)) / scaleX;\n this.dY = (pageY - (this.axisY || 0)) / scaleY;\n \n // 应用方向锁定并计算变换值\n let translateX = this.dX;\n let translateY = this.dY;\n \n if (lockAxis === 'x') {\n translateY = 0; // 锁定Y方向\n } else if (lockAxis === 'y') {\n translateX = 0; // 锁定X方向\n }\n \n // 应用边界条件到允许移动的方向\n const potentialLeft = this.startLeft + translateX;\n const potentialTop = this.startTop + translateY;\n \n // X轴边界条件(在允许X轴移动时应用)\n if (lockAxis !== 'y') {\n if (potentialLeft < minX) {\n translateX = minX - this.startLeft;\n } else if (potentialLeft > maxX) {\n translateX = maxX - this.startLeft;\n }\n }\n \n // Y轴边界条件(在允许Y轴移动时应用)\n if (lockAxis !== 'x') {\n if (potentialTop < minY) {\n translateY = minY - this.startTop;\n } else if (potentialTop > maxY) {\n translateY = maxY - this.startTop;\n }\n }\n if (this.translateX === translateX && this.translateY === translateY) {\n return;\n }\n\n // 调用拖拽中回调\n if (this.props.onDrag) {\n const positionChange = {\n top: this.startTop + translateY,\n left: this.startLeft + translateX,\n bottom: this.startBottom - translateY,\n right: this.startRight - translateX,\n diffX: translateX,\n diffY: translateY\n };\n this.props.onDrag(positionChange);\n }\n \n if (this.draggerRef) {\n this.draggerRef.style.transform = `translate(${translateX}px, ${translateY}px)`;\n }\n this.translateX = translateX;\n this.translateY = translateY;\n };\n\n startTouchDrag = (evt: React.TouchEvent<HTMLDivElement>) => {\n const touch = evt.touches[0];\n if (!touch) return;\n this.axisX = touch.pageX;\n this.axisY = touch.pageY;\n if (!this.props.disabled) {\n this.enableDrag(true);\n }\n };\n\n endDrag = () => {\n if (this.isDragging) {\n const positionChange = this.calcPosition();\n // 调用拖拽结束回调\n this.props.onDragEnd?.(positionChange);\n if (this.draggerRef) {\n this.draggerRef.style.transform = '';\n }\n \n // 隐藏拖拽区域\n if (this.props.showDragArea) {\n this.hideDragArea();\n }\n }\n\n if (this.__moveDisposer) {\n this.__moveDisposer();\n this.__moveDisposer = undefined;\n }\n if (this.__clickDisposer) {\n requestAnimationFrame(() => {\n if (this.__clickDisposer) {\n this.__clickDisposer();\n this.__clickDisposer = undefined;\n }\n });\n }\n if (this.__upDisposer) {\n this.__upDisposer();\n this.__upDisposer = undefined;\n }\n if (this.__bodyClassDisposer) {\n this.__bodyClassDisposer();\n this.__bodyClassDisposer = undefined;\n }\n\n this.isDragging = false;\n };\n\n showDragArea = () => {\n if (!this.props.showDragArea || !this.dragAreaRef) return;\n \n const { lockAxis } = this.props;\n const { minX, maxX, minY, maxY } = this.dragPositionBoundaries;\n const dragSize = this.dragBoxSize;\n \n // 重置样式\n this.dragAreaRef.style.border = '1px dashed var(--ohkit-color-primary, #1890ff)';\n this.dragAreaRef.style.backgroundColor = 'rgba(173, 216, 230, 0.2)'; // 淡透蓝色\n \n if (lockAxis === 'x') {\n // 锁定Y方向,显示为水平虚线区域\n this.dragAreaRef.style.width = `${maxX - minX + dragSize.width}px`;\n this.dragAreaRef.style.height = '2px'; // 更细的虚线高度\n this.dragAreaRef.style.left = `${minX}px`;\n this.dragAreaRef.style.top = `${this.startTop + dragSize.height / 2}px`;\n } else if (lockAxis === 'y') {\n // 锁定X方向,显示为垂直虚线区域\n this.dragAreaRef.style.width = '2px'; // 更细的虚线宽度\n this.dragAreaRef.style.height = `${maxY - minY + dragSize.height}px`;\n this.dragAreaRef.style.left = `${this.startLeft + dragSize.width / 2}px`;\n this.dragAreaRef.style.top = `${minY}px`;\n } else {\n // 自由拖拽,显示完整区域\n this.dragAreaRef.style.width = `${maxX - minX + dragSize.width}px`;\n this.dragAreaRef.style.height = `${maxY - minY + dragSize.height}px`;\n this.dragAreaRef.style.left = `${minX}px`;\n this.dragAreaRef.style.top = `${minY}px`;\n }\n \n this.dragAreaRef.style.display = 'block';\n };\n\n hideDragArea = () => {\n if (this.dragAreaRef) {\n this.dragAreaRef.style.display = 'none';\n }\n };\n calcPosition = () => {\n const { lockAxis } = this.props;\n const { minX, maxX, minY, maxY } = this.dragPositionBoundaries;\n const {height, width} = this.getContainerRect();\n \n // 计算新的位置\n let newTop = this.startTop;\n let newLeft = this.startLeft;\n \n if (lockAxis !== 'y') {\n newLeft += this.dX;\n }\n if (lockAxis !== 'x') {\n newTop += this.dY;\n }\n \n // 应用边界限制\n const realTop = clamp(newTop, minY, maxY);\n const realLeft = clamp(newLeft, minX, maxX);\n const realBottom = height - realTop - this.dragBoxSize.height;\n const realRight = width - realLeft - this.dragBoxSize.width;\n if (realTop !== this.state.top || realLeft !== this.state.left || this.state.bottom !== realBottom || this.state.right !== realRight) {\n this.setState({\n top: realTop,\n left: realLeft,\n bottom: realBottom,\n right: realRight\n });\n }\n const positionChange = {\n top: realTop,\n left: realLeft,\n bottom: realBottom,\n right: realRight,\n diffX: realLeft - this.startLeft,\n diffY: realTop - this.startTop\n };\n this.startTop = realTop;\n this.startLeft = realLeft;\n this.startBottom = realBottom;\n this.startRight = realRight;\n this.dX = this.dY = 0;\n return positionChange;\n };\n\n // 更新状态并计算位置 (外部可以调用)\n updateState = ({offsetX, offsetY}: Pick<DraggableBoxProps, 'offsetX' | 'offsetY'> = {}) => {\n this.setState(this.formatState({offsetX, offsetY}), () => {\n this.reportStartPosition();\n this.calcPosition();\n });\n }\n\n componentDidMount() {\n // 检查初始位置是否在边界范围内,如果不在则修正\n this.reportStartPosition();\n this.calcPosition();\n \n this.__resizeDisposer = addEventListener(window, 'resize', () => {\n this.calcPosition();\n });\n\n // 触屏设备时,阻止拖拽时滚动页面\n if (supportsTouchEvents() && this.draggerRef) {\n this.__preventScrollDisposer = addEventListener(this.draggerRef, 'touchmove', (evt) => {\n evt.preventDefault();\n });\n }\n }\n\n componentWillUnmount() {\n this.__resizeDisposer?.();\n this.__bodyClassDisposer?.();\n this.__moveDisposer?.();\n this.__clickDisposer?.();\n this.__upDisposer?.();\n this.__preventScrollDisposer?.();\n }\n\n render() {\n const { className, zIndex, children, showDragArea, positionMode = 'fixed' } = this.props;\n const { startDrag, startTouchDrag, endDrag } = this;\n const stl = {\n zIndex,\n ...this.position,\n position: positionMode\n };\n return (\n <React.Fragment>\n {showDragArea && (\n <div\n className={c('drag-area')}\n ref={(r) => {\n this.dragAreaRef = r;\n }}\n style={{\n display: 'none',\n position: positionMode,\n backgroundColor: 'rgba(173, 216, 230, 0.2)', // 淡透蓝色\n border: '1px dashed var(--ohkit-color-primary, #1890ff)',\n pointerEvents: 'none',\n zIndex: (zIndex || 9999) - 1,\n boxSizing: 'border-box',\n borderRadius: this.props.lockAxis !== 'none' ? '2px' : '0',\n }}\n />\n )}\n <div\n className={cx(c('container'), className)}\n style={stl}\n ref={(r) => {\n this.draggerRef = r;\n }}\n onMouseDownCapture={startDrag}\n onMouseUpCapture={endDrag}\n onTouchStartCapture={startTouchDrag}\n onTouchEndCapture={endDrag}\n >\n {children}\n </div>\n </React.Fragment>\n );\n }\n}\n"],"names":["isPositioningContextCreator","element","includePosition","style","window","getComputedStyle","position","getPropertyValue","transform","filter","perspective","contain","willChange","includes","findFixedPositionParent","dom","findParent","parent","excludeOwn","document","documentElement","findAbsolutePositionParent","body","getScaleRatio","scaleX","scaleY","rect","getBoundingClientRect","magnification","offsetWidth","Math","round","width","offsetHeight","height","clamp","value","min","max","supportsTouchEvents","navigator","maxTouchPoints","ValidPlacement","c","p","DraggableBox","_React$Component","props","_this","call","this","prePositionMode","preDraggerRef","container","draggerRef","isDragging","axisX","axisY","dX","dY","startTop","startLeft","startBottom","startRight","translateX","translateY","cachedScaleX","cachedScaleY","__moveDisposer","__clickDisposer","__bodyClassDisposer","__upDisposer","__resizeDisposer","__preventScrollDisposer","dragAreaRef","dragingClassMap","none","x","y","enableDrag","isTouch","reportStartPosition","addEventListener","evt","stopPropagation","preventDefault","sqrt","pow","showDragAreaOverMoveDistanse","addClass","lockAxis","undefined","showDragArea","onDragStart","top","left","bottom","right","diffX","diffY","dragging","passive","endDrag","startDrag","nativeEvent","button","pageX","pageY","disabled","_this$dragPositionBou","dragPositionBoundaries","minX","maxX","minY","maxY","TouchEvent","touch","touches","potentialLeft","potentialTop","onDrag","startTouchDrag","positionChange","calcPosition","onDragEnd","hideDragArea","requestAnimationFrame","_this$dragPositionBou2","dragSize","dragBoxSize","border","backgroundColor","display","_this$dragPositionBou3","_this$getContainerRec","getContainerRect","newTop","newLeft","realTop","realLeft","realBottom","realRight","state","setState","updateState","_temp","_ref","formatState","offsetX","offsetY","_this$props","_proto","prototype","_temp2","_ref2","_ref2$offsetX","defaultProps","_ref2$offsetY","_this$props$placement","placement","_placement$split","split","placementY","placementX","getContainer","useCache","_this$props$positionM","positionMode","clientWidth","clientHeight","scrollLeft","scrollTop","scrollerScrollLeft","scrollerScrollTop","borderLeftWidth","borderTopWidth","containerRect","containerStyle","parseFloat","borderRightWidth","borderBottomWidth","_getScaleRatio","_this$draggerRef$getB","componentDidMount","_this2","componentWillUnmount","_this$__resizeDispose","_this$__bodyClassDisp","_this$__moveDisposer","_this$__clickDisposer","_this$__upDisposer","_this$__preventScroll","render","_this3","_this$props2","className","zIndex","children","_this$props2$position","stl","_extends","React","createElement","Fragment","ref","r","pointerEvents","boxSizing","borderRadius","cx","onMouseDownCapture","onMouseUpCapture","onTouchStartCapture","onTouchEndCapture","key","get","_this$props3","boundsX","boundsY","_this$props3$placemen","_this$getContainerRec2","containerWidth","containerHeight","_placement$split2","defaultBounds","minBound","maxBound","_this$curPositionKey","curPositionKey","positionStyles","Component"],"mappings":"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"}
@@ -55,6 +55,7 @@ export declare class DraggableBox extends React.Component<DraggableBoxProps, Dra
55
55
  private __preventScrollDisposer?;
56
56
  dragAreaRef: HTMLDivElement | null;
57
57
  private reportStartPosition;
58
+ dragingClassMap: Record<NonNullable<DraggableBoxProps['lockAxis']>, string>;
58
59
  enableDrag: (isTouch?: boolean) => void;
59
60
  startDrag: (evt: React.MouseEvent<HTMLDivElement>) => void;
60
61
  dragging: (evt: MouseEvent | TouchEvent) => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ohkit/draggable-box",
3
- "version": "0.0.4",
3
+ "version": "0.0.6",
4
4
  "description": "可拖拽容器",
5
5
  "keywords": [
6
6
  "draggable-box"
@@ -34,5 +34,5 @@
34
34
  "react": ">=17",
35
35
  "react-dom": ">=17"
36
36
  },
37
- "gitHead": "683241023c87579029f45b5edd7170daba12337e"
37
+ "gitHead": "0c377936f3902c76576a1850bdbbf6437d989637"
38
38
  }
package/src/index.tsx CHANGED
@@ -258,6 +258,12 @@ export class DraggableBox extends React.Component<DraggableBoxProps, DraggableBo
258
258
  }
259
259
  }
260
260
 
261
+ dragingClassMap: Record<NonNullable<DraggableBoxProps['lockAxis']>, string> = {
262
+ 'none': 'moving',
263
+ 'x': 'moving-x',
264
+ 'y': 'moving-y'
265
+ }
266
+
261
267
  enableDrag = (isTouch = false) => {
262
268
  this.reportStartPosition();
263
269
  this.__moveDisposer?.();
@@ -279,7 +285,7 @@ export class DraggableBox extends React.Component<DraggableBoxProps, DraggableBo
279
285
  },
280
286
  true
281
287
  );
282
- this.__bodyClassDisposer = addClass([document.body, this.draggerRef], c('moving')) || undefined;
288
+ this.__bodyClassDisposer = addClass([document.documentElement, this.draggerRef], c(this.dragingClassMap[this.props.lockAxis || 'none'])) || undefined;
283
289
 
284
290
  // 显示拖拽区域
285
291
  if (this.props.showDragArea && this.dragAreaRef) {
package/src/style.scss CHANGED
@@ -2,7 +2,7 @@ $prefix: ohkit;
2
2
 
3
3
  .#{$prefix}-draggable-box__ {
4
4
  &container {
5
- // position 由内联样式动态控制,默认为 fixed
5
+ // position 由内联样式动态控制,默认为 fixed, 外部可修改
6
6
  user-select: none;
7
7
  cursor: grab;
8
8
  }
@@ -11,6 +11,14 @@ $prefix: ohkit;
11
11
  cursor: move !important;
12
12
  }
13
13
 
14
+ &moving-x {
15
+ cursor: ew-resize !important;
16
+ }
17
+
18
+ &moving-y {
19
+ cursor: ns-resize !important;
20
+ }
21
+
14
22
  &drag-area {
15
23
  transition: opacity 0.2s ease-in-out;
16
24
  opacity: 0.7;
package/LICENSE.md DELETED
@@ -1,5 +0,0 @@
1
- Copyright (c) [2025], [wuqiuyang]
2
-
3
- Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
4
-
5
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.