vue写一个可全屏拖拽容器效果

小编这里是每个页面都用到了这个效果，所以这里先封装了一下组件，封装就不多说了…
首先实现可拖拽效果，我们先

自定义一个全局指令

	data(){
		return {
			
		}
	},
	directives: {
			drag(el) { // 可就在里写指令的js代码
				const oDiv = el // 当前元素
				document.onselectstart = () => {
					return false
				}
				oDiv.onmousedown = e => { // 鼠标按下时的鼠标所在的X，Y坐标
					// 鼠标按下，计算当前元素距离可视区的距离
					const disX = e.clientX - oDiv.offsetLeft
					const disY = e.clientY - oDiv.offsetTop
					document.onmousemove = e => {
						// 通过事件委托，计算移动的距离 
						// 因为浏览器里并不能直接取到并且使用clientX、clientY,所以使用事件委托在内部做完赋值
						const l = e.clientX - disX
						const t = e.clientY - disY
						// 计算移动当前元素的位置，并且给该元素样式中的left和top值赋值
						oDiv.style.left = l + 'px'
						oDiv.style.top = t + 'px'
					}
					document.onmouseup = e => { // 鼠标抬起，清空之前所在的位置，新拖拽的位置已生成并赋值
					document.onmousemove = null
					document.onmouseup = null
				}
				// return false不加的话可能导致黏连，拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
				return false
			}
		},
	},
	mounted() {}，
	methods: {}

封装好之后我们直接在需要拖拽的容器加上v-drag挂载

样式

.header_form {
  //若用relative定位，该定位不脱离文档流，达不到初始化的样式效果
  //若用absolute定位，该定位相对于页面定位，虽然能实现拖动效果，但页面存在滚条时，会随着
  //滚动而改变top值；若没有滚动条，拖到边缘时超出部分也将出现滚动条显示。
  position: fixed;
  right: 10%;
  bottom: 10%;
  z-index: 999;
  width: 200px;
  height: 200px;
  background-color: #fe6908;
}

这样我们就完成了一个页面拖拽效果