js实现元素拖拽 以及屏幕边界判定

js拖拽

js代码如下

/** 
 * @author yang
 * @time 2021/4/15
 * @return {postArr: [{left, top, zIndex, id}]} 该盒子内每个子元素的位置信息
 * */

class Drag {
  constructor(moveBox, moveItem, moveArea) {
    this.moveBox = moveBox // 屏幕大盒子
    this.moveItem = this.moveBox.getElementsByClassName(moveItem) // 盒子中元素
    this.moveArea = moveArea //有效移动区域 {moveArea: string}
    this.posArr = [] // 每个元素的位置信息
    this.__init__()
  }

  __init__() {
    this.dragEvent()
  }
  // 鼠标按下事件
  dragEvent() {
    // 通过bind改变this指向 未改变前this指向.wrapper dom元素, 改变后指向class Drag
    this.moveBox.addEventListener('mousedown', this.handleMousedown.bind(this))
  }
  // 鼠标移动事件
  handleMousedown(e) {
    if (e.target.className == this.moveArea) { //在指定区域才能够拖拽
      // 父级目标元素
      let target = e.target.parentNode
      // 鼠标位置
      let mouseX = e.clientX
      let mouseY = e.clientY
      // 移动盒子位置
      let itemLeft = e.target.parentNode.offsetLeft
      let itemTop = e.target.parentNode.offsetTop
      // 鼠标相对位置
      let disX = mouseX - itemLeft
      let disY = mouseY - itemTop

      // 点击后监听鼠标移动事件
      document.onmousemove = (e) => {
        let left = e.clientX - disX
        let top = e.clientY - disY
        let zIndex = parseInt(new Date().getTime() / 1000) //当前盒子的z-index


        target.style.left = left + 'px'
        target.style.top = top + 'px'
        target.style.zIndex = zIndex
        // 边界判定
        if (left <= 0) { //左右边界限定
          left = 0
          target.style.left = 0 + 'px'
        } else if (left >= this.getInner().w - target.offsetWidth) { //元素在最右边时的判定，屏幕的宽度减去元素自身的宽度
          left = this.getInner().w - target.offsetWidth;
          target.style.left = left + 'px'
        }
        if (top <= 0) { //上下边界限定
          top = 0;
          target.style.top = 0 + 'px'
        } else if (top >= this.getInner().h - target.offsetHeight) { //元素在最下边时的判定，屏幕的高度减去元素自身的高度
          top = this.getInner().h - target.offsetHeight - 10;
          target.style.top = top + 'px'
        }

      }
      // 鼠标放开
      document.onmouseup = (e) => {
        document.onmousemove = null
        document.onmouseup = null
        this.getMoveItemsPos()
      }
    }
  }

  // 获取移动盒子的位置
  getMoveItemsPos() {
    this.posArr = [] //将上一次数据清空重新计算（如需优化需要改变指定项数据）
    let len = this.moveItem.length
    for (let i = 0; i < len; i++) {
      let left = this.moveItem[i].style.left
      let top = this.moveItem[i].style.top
      let zIndex = this.moveItem[i].style.zIndex
      let id = parseInt(this.moveItem[i].getAttribute('data-id'))
      this.posArr.push({
        x: left,
        y: top,
        z_index: zIndex,
        id: id
      })
    }
  }

  // 外界获取位置列表
  getPos() {
    return this.posArr
  }


  //得到浏览器页面内容区窗口的大小  获取屏幕边界
  getInner() {
    if (typeof innerHeight == 'undefined') {
      return {
        w: document.documentElement.clientWidth,
        h: document.documentElement.clientHeight
      } //IE浏览器适用
    } else {
      return {
        w: innerWidth,
        h: innerHeight
      } //非IE浏览器适用
    }
  }
}


export default Drag