vue 自定义指令拖拽

最新推荐文章于 2024-08-20 20:52:20 发布

开心每一天！

最新推荐文章于 2024-08-20 20:52:20 发布

阅读量761

点赞数

分类专栏：随记备忘文章标签： vue 拖拽自定义指令

本文链接：https://blog.csdn.net/sdaulee/article/details/100103697

版权

随记备忘专栏收录该内容

49 篇文章 1 订阅

订阅专栏

之前看别人vue的视频，练习写了个自定义指令-拖拽，当时引入vue.js的版本是1.0.28，现在也可以正常使用。上代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue 指令 -拖拽</title>
	<script src="vue.js"></script>
	<style>
	#box{width: 100px;height: 100px;background: blue;position: absolute;left: 0;top: 0}
	</style>
</head>
<body>
	<div id="box" v-drag></div>
	<script>
	Vue.directive('drag',function(){
		console.log('this:',this);//Directive
		var oDiv = this.el;
		oDiv.onmousedown = function(ev){
			var ev = ev || window.event;
			var disX = ev.clientX-oDiv.offsetLeft;
			var disY = ev.clientY-oDiv.offsetTop;


			document.onmousemove = function(ev){
				var l = ev.clientX-disX;
				var t = ev.clientY-disY;
				oDiv.style.left = l+'px';
				oDiv.style.top = t+'px';
			};
			document.onmouseup = function(){
				document.onmousemove = null;
				document.onmouseup = null;
			}
		};
		
	});
	new Vue({
		el: '#box',
		data:{
		}
	});
	</script>
</body>
</html>

两点注意：Vue.directive()指令一定要在vue实例创建之前，dom元素一定要设置绝对定位。

现在用2.0版本就不好使了，去看了下文档，修改了一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="./vue.js"></script>
    <style>
        .drag{
            position: absolute;
            width: 200px;
            height: 200px;
            background: yellowgreen
        }
    </style>
    <script>
        Vue.directive('drag',
          {bind: function(el){
            var oDiv = el;//el就是指令绑定的元素
            oDiv.onmousedown = function(ev){
                var startX = ev.clientX - oDiv.offsetLeft;
                var startY = ev.clientY - oDiv.offsetTop;

                document.onmousemove = function(e){
                    oDiv.style.left = (e.clientX - startX==0)? 0 : e.clientX - startX+ 'px';
                    oDiv.style.top = e.clientY - startY==0? 0: e.clientY - startY + 'px';
                    
                }

                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null
                }
            }
        }})
        window.onload = function(){
            var vm = new Vue({
                el: '#app',
                data:{
                    
                }
            })
        }
    </script>
</head>
<body>
    <div id="app">
        
        <div class="drag" v-drag></div>
    </div>
</body>
</html>

文档地址：https://cn.vuejs.org/v2/guide/custom-directive.html

边界检测什么的还没有做，先记下来