Vue实现div可拖动组件 并可操纵盒子大小

Vue实现div可拖动组件 并可操纵盒子大小

借鉴文章:https://blog.csdn.net/qq_46103732/article/details/128902192

• 场景：在pc端项目中会碰到弹框后多个页面重叠的场景，类似于电脑打开多个文件夹，这时想要同时完整的展示两个页面的内容，就可以拖动页面，改变位置
• 注意: 本文是进行封装全局组件,可以供给全局使用
• 功能: 实现div可拖拽并且可以控制其高与宽

实现拖拽功能

1.在src下新建文件夹 until 并新建 drag.js 文件 作为工具函数所使用

2.在 main.js 中进行方法注册

import directive from './util/drag'
 
Vue.use(directive)

3.编写 drag.js

export default (Vue) => {
    Vue.directive("drags", {
        inserted: function (el) {
            let oDiv = el // 获取当前元素
            oDiv.onmousedown = (e) => {
                    // 算出鼠标相对元素的位置
                    let disX = e.clientX - oDiv.offsetLeft

                    let disY = e.clientY - oDiv.offsetTop
                    console.log("disX", disX, "disY", disY);

                    document.onmousemove = (e) => {
                        // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                        let left = e.clientX - disX

                        oDiv.style.left = left + 'px'

                        let top = e.clientY - disY
                        oDiv.style.top = top + 'px'
                    }
                    document.onmouseup = (e) => {
                        document.onmousemove = null
                        document.onmouseup = null
                        oDiv = el

                    }
                },
              
        }
    })
}

4.组件中使用

<div v-drags class="box box2" style="width: 200px; height: 200px;"></div>

注意点:

• v-drags 是进行绑定自定义指令
• 行内书写style才能被 oDiv.style 所识别到
• 并且需要给盒子使用 absolute 定位

.box {
    position: absolute;
    width: 200px;
    height: 200px;
}

实现div体积变化功能

  oDiv.onmousewheel = function (event) {
          //判断鼠标滚轮滚动的方向
		event = event || window.event;
//alert(event.wheelDelta);向上120，向下-120
	if (event.wheelDelta > 0 || event.detail < 0) { 
        //火狐event.detail  向上滚动-3 向下滚动+3
		oDiv.style.width = (parseInt(oDiv.style.width) + 5).toString() + 'px'
		oDiv.style.height = (parseInt(oDiv.style.height) + 5).toString() + 'px'
       
	} else {
        
		oDiv.style.width = (parseInt(oDiv.style.width) - 5).toString() + 'px'
         oDiv.style.height = (parseInt(oDiv.style.height) - 5).toString() + 'px'
     }
   return false;
};

• 与 oDiv.onmousedown 同级