javascript盒子的拖拽和缩放

思路

拖拽

拖拽实际就是改变盒子的 left和top.给盒子来个固定定位,鼠标按下并滑动时获取鼠标的实时位置,改变盒子的位置

缩放

缩放实际就是改变盒子的width和height,鼠标按下并滑动时获取鼠标的位置,得到鼠标移动的位置再加上原来的宽高

上代码

拖拽

简单说明一下:

getCss: 获取盒子的left和top
resize事件:窗口改变大小会影响移动的位置
mousedown事件':当前盒子被按住时获取鼠标初始位置,获取盒子宽高(和盒子缩放有关)
mousemove事件:鼠标移动获取实时位置,实时改动盒子的left和top
mouseup事件:鼠标弹起
里面的变量有点多,自己看,理解起来没那么难

/**
 * 
 * @param {目标盒子} drag 
 * @param {目标盒子的父盒子,限制盒子移动的空间} fatherBox 
 */
export function dragBox(drag, fatherBox) {
  function getCss(ele) {
    let { left, top } = document.defaultView.getComputedStyle(ele)
    return {
      left: +left.replace('px', ''), top: +top.replace('px', '')
    }
  }
  let initX
  let initY
  let dragable = false
  let { left, top } = getCss(drag)
  let wrapLeft = left
  let wrapRight = top
  let clientHeight = document.body.clientHeight
  // 可以把这四个限制写在一个对象里面,见下面zoom.js
  let mostLeft = fatherBox.offsetLeft
  let mostRight
  let mostTop = 0
  let mostBottom

  // 改变页面宽高触发
  window.addEventListener('resize', function(e) {
    clientHeight = document.body.clientHeight
    let { width, height } = drag.style
    mostLeft = fatherBox.offsetLeft
    mostRight = fatherBox.offsetLeft + fatherBox.clientWidth - +width.replace('px', '')
    mostBottom = clientHeight - +height.replace('px', '')
  })

  drag.addEventListener('mousedown', function(e) {
    dragable = true
    let { width, height } = drag.style
    mostRight = fatherBox.offsetLeft + fatherBox.clientWidth - +width.replace('px', '')
    mostBottom = clientHeight - +height.replace('px', '')
    initX = e.clientX
    initY = e.clientY
  }, false)

  document.addEventListener('mousemove', function(e) {
    if(dragable === true) {
      let nowX = e.clientX
      let nowY = e.clientY
      let disX = nowX - initX
      let disY = nowY - initY
      let left = wrapLeft + disX
      let top = wrapRight + disY
      // 超出限制时判断
      left = left < mostLeft ? mostLeft : left
      left = left > mostRight ? mostRight : left
      top = top < mostTop ? mostTop : top
      top = top > mostBottom ? mostBottom : top
      drag.style.left = left + 'px'
      drag.style.top = top + 'px'
    }
  })
  document.addEventListener('mouseup', function(e) {
    dragable = false
    let { left, top } = getCss(drag)
    wrapLeft = left
    wrapRight = top
    document.onmousemove = null
    document.onmouseup = null
    window.onresize = null

  }, false)
}

缩放

缩放就比拖拽简单很多,因为不会因为页面大小变化而改变范围,如果你上面的都看懂了,下面的就更容易看懂了
通常目标盒子会放在 上, 下, 左, 右, 左上, 右上, 左下, 右下

/**
 * 
 * @param {目标盒子} zoom 
 * @param {需要改变宽高的盒子} fatherBox 
 */
export function zoomBox(zoom, fatherBox) {
  let zoomable = false
  let initX
  let initY
  let { width, height } = fatherBox.style
  let fatherWidth = +width.replace('px', '')
  let fatherHeight = +height.replace('px', '')
  let limit = {
    MAX_WIDTH: 600,
    MIN_WIDTH: 300,
    MAX_HEIGHT: 800,
    MIN_HEIGHT: 400
  }
  zoom.addEventListener('mousedown', function(e) {
    e.stopPropagation()
    zoomable = true
    let { width, height } = fatherBox.style
    fatherWidth = +width.replace('px', '')
    fatherHeight = +height.replace('px', '')
    initX = e.clientX
    initY = e.clientY
  }, false)
  document.addEventListener('mousemove', function(e) {
    if(zoomable === true) {
      let nowX = e.clientX
      let nowY = e.clientY
      let disX = nowX - initX
      let disY = nowY - initY
      let nowWidth = fatherWidth + disX
      let nowHeight = fatherHeight + disY

      if(nowWidth > limit.MAX_WIDTH) {
        nowWidth = limit.MAX_WIDTH
      }
      if(nowWidth < limit.MIN_WIDTH) {
        nowWidth = limit.MIN_WIDTH
      }
      if(nowHeight > limit.MAX_HEIGHT) {
        nowHeight = limit.MAX_HEIGHT
      }
      if(nowHeight < limit.MIN_HEIGHT) {
        nowHeight = limit.MIN_HEIGHT
      }

      fatherBox.style.width = nowWidth + 'px'
      fatherBox.style.height = nowHeight + 'px'

    }
  })

  document.addEventListener('mouseup', function(e) {
    zoomable = false
  }, false)
}

用法

直接再页面中引入方法,找好目标盒子和父盒子.调用方法就行了

/*
<div id='dragFather'>
	<div id='dragBox'></div>
</div>
*/

import { dragBox } from '@/util/drag'
dragBox(document.querySelector('#dragBox'), document.querySelector('#dragFather'))