Vue自定义拖拽指令（元素的拖拽）并实现自定义指令遍历注册

朱雀 2023-07-03 02:50 91阅读 0赞

## 描述 ##

在项目中，可能某些元素我们要实现可拖拽的要求，刚好使用Vue开发，Vue有一个很好用的东西，叫做自定义指令。后面想了想，可以把这个功能做成自定义指令，哪个元素想用，就绑定上去就好了，方便简单明了。至于后面的遍历注册很简单，就是一个forEach循环，使我们的代码更简洁，因为我们项目中可能不止定义一个自定义指令，所以也算一个小小的优化。

看之前也可以去看下官方文档的自定义指令  
[https://cn.vuejs.org/v2/guide/custom-directive.html][https_cn.vuejs.org_v2_guide_custom-directive.html]

## 效果 ##

先看下效果图，实现了拖拽功能，因为上传GIF图有大小限制，只演示了限制一边，实际上四边全部限制了超出。

![在这里插入图片描述][20200201172616377.gif]

## 代码 ##

首先，新建一个utils文件夹，在里面新建一个directive.js文件。把我们的自定义指令放在这个文件里面。

实现拖拽指令的逻辑也比较简单，首先我们在touchstart事件中，记录元素最开始的位置，然后在touchmove中，监听我们的手指位置，动态的改变元素的top和left的值，就可以实现元素跟随我们的手指移动了。最后加一个判断，使元素不可以超出我们的屏幕范围之外。

export default { 
    	//这个是自动获取焦点，拿过来展示循环注册自定义指令的
        focus: { 
            inserted: function(el) { 
                // 聚焦元素
                el.focus()
            }
        },
        //拖拽指令
        drag: { 
        	//这个el就是我们绑定的那个元素
            inserted: function(el) { 
                // 页面可用高度
                let pageHeight = window.screen.availHeight
                let pageWidth = window.screen.availWidth
    
                // 初始位置
                let touchstartX = 0
                let touchstartY = 0
    
                // 元素的宽高的一半
                let elWidth = el.clientWidth / 2
                let elHeight = el.clientHeight / 2
    
                el.style.position = 'fixed'
    
                el.addEventListener('touchstart', function(e) { 
                    // 相对于可视区域的位置,记录最开始的位置
                    touchstartX = e.targetTouches[0].clientX
                    touchstartY = e.targetTouches[0].clientY
                })
    
                el.addEventListener('touchmove', function(e) { 
                    // 相对于可视区域的位置
                    let newTouchstartX = e.targetTouches[0].clientX
                    let newTouchstartY = e.targetTouches[0].clientY
    				//这里也可以判断的更精细点，我这里处理的比较粗糙
                    if (newTouchstartX > elWidth && newTouchstartY > elHeight && newTouchstartY <= pageHeight - elHeight && newTouchstartX <= pageWidth - elWidth) { 
                        el.style.left = touchstartX + (newTouchstartX - touchstartX) - elWidth + 'px';
                        el.style.top = touchstartY + (newTouchstartY - touchstartY) - elHeight + 'px';
                    }
                })
            }
        }
    }

写好我们的自定义指令后，就是注册了，我这边直接注册全局自定义指令，在main.js文件中，导入写好的js文件，循环遍历下。到这里我们的操作就结束了。

import directive from './utils/directive'
    
    Object.keys(directive).forEach(key => { 
        Vue.directive(key, directive[key]);
    });

使用的话，直接`v-focus`、`v-drag`就好了

写完后，拖拽的时候也没有导致页面滚动事件，所以我也没有对页面滚动进行禁止。

如果想禁止的话，Vue提供了一些属性，`@touchmove.prevent`  
.prevent是VUE里的事件修饰符，用来阻止默认事件，相当于 event.preventDefault()

个人水平有限，有问题欢迎大家留言指导，仅供学习和参考。

学海无涯！努力二字，共勉！

[https_cn.vuejs.org_v2_guide_custom-directive.html]: https://cn.vuejs.org/v2/guide/custom-directive.html
[20200201172616377.gif]: https://img-blog.csdnimg.cn/20200201172616377.gif