全局拖拽

<br /> :::align-left<br /> ``` <br /> /**<br /> * @Name: 拖动插件<br /> * @Descripttion: body区域内拖动,支持传染Dom对象或者css选择器<br /> * @Author: gaohan<br /> * @Date: 2023/8/17 16:36<br /> * @LastEditors: gaohan<br /> * @LastEditTime: 2023/8/17<br /> */<br /> <br /> declare namespace DragDrop {<br /> // 拖动配置项<br /> export interface dropOptions {<br /> // 是否锁定,锁定状态下不可拖动<br /> locked: boolean,<br /> // 拖动目标元素<br /> target: string|HTMLElement,<br /> // 拖动目标元素父级<br /> parent: string|HTMLElement<br /> }<br /> // 默认配置项<br /> export interface defaultOptions{<br /> // 拖动<br /> drop: dropOptions,<br /> // 默认顶部top值<br /> top: number<br /> }<br /> }<br /> <br /> class DragDrop{<br /> options:DragDrop.defaultOptions<br /> root:HTMLElement|null<br /> parent:HTMLElement|null<br /> lock:()=>void;<br /> constructor(options:object,top:number=100){<br /> const drop = Object.assign({<br /> locked: false,<br /> target: '',<br /> parent: document.body<br /> },options)<br /> this.options = {<br /> drop,<br /> top<br /> }<br /> this.root = null<br /> this.parent = null<br /> this.lock = ()=>{<br /> this.options.drop.locked = true<br /> }<br /> this.reset()<br /> }<br /> protected reset(){<br /> const {drop} = this.options<br /> const {locked,target,parent} = drop<br /> if( locked || !target ){<br /> return<br /> }<br /> if( typeof target === 'string'){<br /> this.root = document.querySelector(target)<br /> }else{<br /> this.root = this.isDom(target) ? target : null<br /> }<br /> if( typeof parent === 'string'){<br /> this.parent = document.querySelector(parent)<br /> }else{<br /> this.parent = this.isDom(parent) ? parent : null<br /> }<br /> if( this.parent === null && this.root === null ){<br /> return<br /> }<br /> <br /> this.setStyle()<br /> this.bindEvent()<br /> }<br /> protected setStyle(){<br /> // 设置弹窗宽高,默认位置<br /> const {top} = this.options<br /> const winWidth = window.innerWidth<br /> const rootWidth = parseFloat(this.parent?.clientWidth+'')<br /> const maxWidth = winWidth*0.4<br /> const width = rootWidth <= maxWidth ? rootWidth : maxWidth<br /> const left = (winWidth - width) / 2<br /> const style:any = {<br /> 'position': 'fixed',<br /> 'z-index': 99999,<br /> 'top': top + 'px',<br /> 'left': left + 'px',<br /> 'width': maxWidth + 'px',<br /> 'max-height': 600 + 'px'<br /> }<br /> Object.keys(style).map((key:any)=>{<br /> (this.parent as HTMLElement).style[key] = style[key]<br /> });<br /> (this.root as HTMLElement).style.cursor = 'move'<br /> }<br /> protected bindEvent(){<br /> // 绑定拖动事件<br /> this.root?.addEventListener('pointerdown', (event:PointerEvent)=>{<br /> event.stopPropagation()<br /> event.cancelBubble=true;<br /> if( this.parent && this.root ){<br /> const xDown:number = event.clientX<br /> const yDown:number = event.clientY<br /> const leftDown:number = this.parent.offsetLeft<br /> const topDown:number = this.parent.offsetTop<br /> const move = (e:PointerEvent)=>{<br /> e.stopPropagation()<br /> e.cancelBubble=true;<br /> <br /> const xMove:number = e.clientX;<br /> const yMove:number = e.clientY;<br /> const x:number = leftDown + xMove - xDown;<br /> const y:number = topDown + yMove - yDown;<br /> (this.parent as HTMLElement).style.left = this.getPos(x,false) + 'px';<br /> (this.parent as HTMLElement).style.top = this.getPos(y,true) + 'px';<br /> <br /> }<br /> document.addEventListener('pointermove', move)<br /> this.root.addEventListener('pointerup', ()=>{<br /> this.root?.removeEventListener('pointerdown',()=>{})<br /> document.removeEventListener('pointermove',move)<br /> })<br /> }<br /> })<br /> }<br /> protected getPos(value: number, isTop: boolean){<br /> const winWidth = window.innerWidth<br /> const winHeight = window.innerHeight<br /> const rootWidth = parseFloat(this.parent?.clientWidth+'')<br /> const rootHeight = parseFloat(this.parent?.clientHeight+'')<br /> const limitLeft = -(rootWidth/2)<br /> const limitTop = 0<br /> const limitRight = (winWidth - rootWidth) + (rootWidth/2)<br /> const limitBottom = (winHeight - rootHeight) + (rootHeight/2)<br /> if( isTop ){<br /> value = value <= limitTop ? limitTop : value<br /> value = value >= limitBottom ? limitBottom : value<br /> }else{<br /> value = value <= limitLeft ? limitLeft : value<br /> value = value >= limitRight ? limitRight : value<br /> }<br /> return value<br /> }<br /> private isDom(obj: any){<br /> const d = document.createElement("div");<br /> try{<br /> d.appendChild(obj.cloneNode(true));<br /> return obj.nodeType==1<br /> }catch(e){<br /> return obj === window || obj === document;<br /> }<br /> }<br /> }<br /> export default DragDrop<br /> <br /> /**<br /> *<br /> * 知识点解析:<br /> * 面向对象编程<br /> * 命名空间<br /> * 指针,触屏,鼠标事件<br /> * 方法作用域<br /> * 方法关键词 public private protected<br /> * 界值处理<br /> * 报错处理<br /> * ts<br /> * es6语法<br /> *<br /> *<br /> * 插件的常见形式:<br /> * 实例化一个对象,初始化时构建基础数据,抛出部分方法提供别人使用<br /> *<br /> * 初始化方法构建:<br /> * 1) 默认参数和传参<br /> * 2) 基础数据构建<br /> * 3) 有Dom操作的确定Dom元素<br /> * 4) 绑定必要的事件<br /> *<br /> * */<br /> <br /> <br /> <br /> ```<br />