vue里的自定义指令directives

最新推荐文章于 2025-07-11 16:31:29 发布

. . . . .

最新推荐文章于 2025-07-11 16:31:29 发布

阅读量918

点赞数

CC 4.0 BY-SA版权

分类专栏：大前端技术

本文链接：https://blog.youkuaiyun.com/yexudengzhidao/article/details/84204712

大前端技术专栏收录该内容

344 篇文章

订阅专栏

本文介绍如何在Vue中自定义拖拽指令，通过封装实现元素的拖动功能。使用mousedown和mousemove事件，结合offsetLeft和offsetTop属性，实现元素在页面上的自由拖动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Vue里我们除了可以使用Vue官方给我们定义好的指令外，也可以自己来封装指令。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>
	<style type="text/css">
		.drag {
			position: absolute;
			left: 0px;
			top: 0px;
			width: 100px;
			height: 100px;
			background: red;
		}
	</style>
</head>
<body>
	<div id="root">
		<div class="drag" v-drag></div>
		<div class="drag" v-drag></div>
		<div class="drag" v-drag></div>
	</div>		
	</p>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#root',
			data: {
				a: 1,
				b: 2
			},
			methods: {
			},
			directives: {
				drag(el){
					el.onmousedown = function(e){
						// e.pageX  获取鼠标当前位置距离页面的位置。
						// el.offsetLeft  获取当前元素距离页面左边的位置
						var disx = e.pageX - el.offsetLeft;
						var disy = e.pageY - el.offsetTop;
						document.onmousemove = function(e) {
							el.style.left = e.pageX - disx + 'px';
							el.style.top = e.pageY - disy + 'px';
						}
						document.onmouseup = function(e) {
							document.onmousemove = document.onmouseup = null;
						}
					}
				}
			}
		})
	</script>

</body>
</html>