import { TVector , TVectorRange , addVector , diffVector , formatVector , setTranslatePosition , getPosition , isMobile , } from "./utils" ; interface IOptions { /** 拖拽范围元素 */ outerElement ? : HTMLElement ; /** 拖拽图标元素 */ innerElement ? : HTMLElement ; /** 拖拽开始的回调 */ onDragStart ? : ( v : TVector ) => void ; /** 拖拽中的回调 */ onDrag ? : ( v : TVector ) => void ; /** 拖拽结束的回调 */ onDragEnd ? : ( v : TVector ) => void ; } /**
 * 用transform属性轻松实现拖拽效果
 */ const enableDrag = ( element , options ? ) => { let { outerElement , innerElement , onDragStart , onDrag , onDragEnd } = options ?? { } ; let startTransform = window . getComputedStyle ( element ) . transform ; let startPosition = null ; let endPosition = null ; let draggingMoveVectorRange = null ; let draggedMoveVector = [ 0 , 0 ] ; let draggingMoveVector = [ 0 , 0 ] ; outerElement = outerElement ?? document . body ; element = element ; innerElement = innerElement ?? element ; const onMouseDown = ( e ) => { e . stopPropagation ( ) ; startPosition = getPosition ( e ) ; if ( outerElement && element && innerElement ) { const outerElementRect = outerElement . getBoundingClientRect ( ) ; const elementRect = element . getBoundingClientRect ( ) ; draggingMoveVectorRange = [ outerElementRect . top - elementRect . top , outerElementRect . bottom - elementRect . bottom , outerElementRect . left - elementRect . left , outerElementRect . right - elementRect . right , ] ; } typeof onDragStart === "function" && onDragStart ( draggedMoveVector ) ; } ; const onMouseMove = ( e ) => { if ( startPosition && draggingMoveVectorRange ) { endPosition = getPosition ( e ) ; const currentMoveVector = formatVector ( diffVector ( startPosition , endPosition ) , draggingMoveVectorRange ) ; draggingMoveVector = addVector ( draggedMoveVector , currentMoveVector ) ; element . style . transform = setTranslatePosition ( startTransform , draggingMoveVector ) ; typeof onDrag === "function" && onDrag ( draggingMoveVector ) ; } } ; const onMouseUp = ( e ) => { if ( startPosition && draggingMoveVectorRange ) { draggedMoveVector = draggingMoveVector ; typeof onDragEnd === "function" && onDragEnd ( draggedMoveVector ) ; } startPosition = null ; } ; const addEventListener = ( ) => { if ( innerElement ) { if ( isMobile ( ) ) { innerElement . addEventListener ( "touchstart" , onMouseDown ) ; document . addEventListener ( "touchmove" , onMouseMove ) ; document . addEventListener ( "touchend" , onMouseUp ) ; return ; } innerElement . addEventListener ( "mousedown" , onMouseDown ) ; document . addEventListener ( "mousemove" , onMouseMove ) ; document . addEventListener ( "mouseup" , onMouseUp ) ; } } ; const removeEventListener = ( ) => { if ( innerElement ) { if ( isMobile ( ) ) { innerElement . removeEventListener ( "touchstart" , onMouseDown ) ; document . removeEventListener ( "touchmove" , onMouseMove ) ; document . removeEventListener ( "touchend" , onMouseUp ) ; return ; } innerElement . removeEventListener ( "mousedown" , onMouseDown ) ; document . removeEventListener ( "mousemove" , onMouseMove ) ; document . removeEventListener ( "mouseup" , onMouseUp ) ; } } ; addEventListener ( ) ; return removeEventListener ; } ; export default enableDrag ;