前端 vue v-drag 拖拽面板组件 - 戴向天

大家好！我叫戴向天

QQ群：602504799

QQ:809002582

<template>
	<div v-drag :class="{'fixed':isFixed}">
		<slot/>
	</div>
</template>

<script>

	export default {
		props:{
			isFixed:{
				type:Boolean,
				default:true
			}
		},
		directives:{
			drag(el) {
				el.onmousedown = (e)=>{
					e.stopPropagation()
					let 
						disx = e.pageX - el.offsetLeft,
						disy = e.pageY - el.offsetTop
					
					document.body.onselectstart = ()=> false
					
					document.onmousemove = (e)=>{
					  el.style.left = e.pageX - disx + 'px'
					  el.style.top = e.pageY - disy + 'px'
					}
					
					document.onmouseup = ()=> document.body.onselectstart = document.onmousemove = document.onmouseup = null
				}
				el.onmouseleave = ()=> document.body.onselectstart = document.onmousemove = document.onmouseup = null
				el.onmousemove = ()=> document.body.onselectstart = document.onmousemove = document.onmouseup = null
				el.onmouseup = ()=> document.body.onselectstart = document.onmousemove = document.onmouseup = null
			}
		}
	}

</script>

<style scoped>
	.fixed{
		position:fixed
	}
</style>

标签：body,el,vue,戴向天,drag,onmousemove,onmouseup,document,onselectstart
来源： https://blog.csdn.net/weixin_41088946/article/details/101348366