vue自定义指令，移动

最新推荐文章于 2023-12-07 10:10:39 发布

原克技术

最新推荐文章于 2023-12-07 10:10:39 发布

阅读量95

点赞数

分类专栏： vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_44432032/article/details/110518348

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<script src="./js/vue.js"></script>
	</head>
	<style>
		#main div {
			width: 100px;
			height: 100px;
			position: absolute;
		}

		.cleft {
			background-color: red;
			left: 0px;
			top: 0px;
		}

		.cright {
			top: 0px;
			right: 0px;
			background-color: yellow;
		}
	</style>
	<body>
		<div id="main">
			<div v-yidong class="cleft">left</div>
			<div v-yidong class="cright">right</div>
		</div>
	</body>
	<script>
		// 自定义指令
		Vue.directive('yidong', function(el) {
			el.onmousedown = function(e) {
				var x = e.clientX - el.offsetLeft;
				var y = e.clientY - el.offsetTop;
				// console.log(x+' '+y);
				document.onmousemove = function(e) {
					el.style.left = e.clientX - x + 'px';
					el.style.top = e.clientY - y + 'px';

				}
				document.onmouseup = function() {
					document.onmousedown = null;
					document.onmousemove = null;
				}
			}
		});
		new Vue({
			el: "#main",
			data: {

			}
		});
	</script>
</html>