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