vue 简单小结-元素拖动-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46382477/article/details/108114865

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>练习：自定义指令实例（元素拖动）</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<style>
		#app div{
			width: 100px;
			height: 100px;
			position:absolute;
		}
		#app .hello{
			background-color:red;
			top:0;
			left:0;
		}
		#app .world{
			background-color:blue;
			top:0;
			right:0;
		}

	</style>
</head>
<body>
	<div id="app">
		<div class="hello" v-drag>itapp {{msg}}</div>
		<button type="button" @click="changeMsg()"> 改变msg</button>
	</div>
	<script>
        // Vue.directive('drag',{});
        // bind update 钩子函数可以调用
        // bind :指令第一次绑定到元素上时调用，只调用一次，可执行初始化操作
		Vue.directive('drag',function(el){
            console.log('kkkkk');
            el.onmousedown=function(e){
				//获取鼠标点击处分别与div左边和上边的距离：鼠标位置-div位置
				// var disX=e.clientX-el.offsetLeft;   //e.offsetX
				// var disY=e.clientY-el.offsetTop;  // e.offsetY
				var disX = e.offsetX;
				var disY = e.offsetY;
				//包含在onmousedown里面，表示点击后才移动，为防止鼠标移出div，使用document.onmousemove
				document.onmousemove=function(e){
					//获取移动后div的位置：鼠标位置-disX/disY
					var l=e.clientX-disX;
					var t=e.clientY-disY;
					el.style.left=l+'px';
					el.style.top=t+'px';
				}
				//停止移动
				document.onmouseup=function(e){
					document.onmousemove=null;
					document.onmouseup=null;
				}

			}
		});

		var vm=new Vue({
			el:'#app',
			data:{
				msg:'welcome to itapp',
				username:'alice'
			},
			methods:{
				changeMsg(){
					this.msg='欢迎来到自定义指令实例（元素拖动）'
				}
			}
		});
	</script>
	
</body>
</html>