场景:在pc端项目中会碰到弹框后多个页面重叠的场景,类似于电脑打开多个文件夹,这时想要同时完整的展示两个页面的内容,就可以拖动页面,改变位置
很多教程都是使用自定义方法在单个组件中使用,本文带大家在Vue项目中封装一个拖拽div的方法,注册全局使用
实现步骤:
在src下的util文件夹下创建 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
document.onmousemove = (e) => {
// 用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
let left = e.clientX - disX
let top = e.clientY - disY
oDiv.style.left = left + 'px'
oDiv.style.top = top + 'px'
}
document.onmouseup = (e) => {
document.onmousemove = null
document.onmouseup = null
}
}
}
})
}
在main.js中注册方法
import directives from './util/derectives'
Vue.use(directives)
使用,在需要实现拖拽的div标签上直接加上 v-drag 即可,无需再单独引入
<div v-drag></div>
到此在Vue中实现div拖拽的步骤就结束了,需要的小伙伴快去试试吧!