vue.js 自定义指令(拖拽、拖动、移动) 指令 v-drag详解
丿Mr_Liu 人气:01.main.js文件中添加已下代码
Vue.directive('drag', { //1.指令绑定到元素上回立刻执行bind函数,只执行一次 //2.每个函数中第一个参数永远是el,表示绑定指令的元素,el参数是原生js对象 //3.通过el.focus()是无法获取焦点的,因为只有插入DOM后才生效 bind: function (el) { }, //inserted表示一个元素,插入到DOM中会执行inserted函数,只触发一次 inserted: function (el) { let odiv = el; //获取当前元素 let firstTime = '', lastTime = ''; el.onmousedown = function (e) { var disx = e.pageX - el.offsetLeft; var disy = e.pageY - el.offsetTop; // 给当前元素添加属性,用于元素状态的判断 odiv.setAttribute('ele-flag', false) odiv.setAttribute('draging-flag', true) firstTime = new Date().getTime(); document.onmousemove = function (e) { el.style.left = e.pageX - disx + 'px'; el.style.top = e.pageY - disy + 'px'; } document.onmouseup = function (event) { document.onmousemove = document.onmouseup = null; lastTime = new Date().getTime(); if ((lastTime - firstTime) > 200) { odiv.setAttribute('ele-flag', true) event.stopPropagation() } setTimeout(function () { odiv.setAttribute('draging-flag', false) }, 100) } } } })
2.组件中的使用
<template> <div class="drag" v-drag @click="handleDragClick"> 我是拖拽的div<div> <template> <script> methods:{ handleDragClick(e){ // 判断拖拽组件的状态 let isDrag = false; try { isDrag = e.target.getAttribute('ele-flag') === 'true'; }catch (e) { } if(isDrag){ return; } // 当推拽组件未在 拖动状态 执行点击事件 // todo 下面是执行点击事件的代码 } } </script> <style> // 这里是拖拽 组件的样式 .drag{ width:100px; height:100px; border:1px solid pink; } </style>
补充:vue自定义拖拽指令v-drag
<template> <div class="drag" v-drag ref="drag"></div> </template> <script> export default { name: 'Home', data(){ return{ positionX:'', positionY:'' } }, mounted () { this.$refs.drag.style.top = window.localStorage.getItem('top')+'px' this.$refs.drag.style.left = window.localStorage.getItem('left')+'px' }, directives: { drag: { // 指令的定义 bind: function (el,binding,vnode) { console.log(el); console.log(binding); console.log(vnode.context); let odiv = el; //获取当前元素 odiv.onmousedown = (e) => { //算出鼠标相对元素的位置 let disX = e.clientX - odiv.offsetLeft; let disY = e.clientY - odiv.offsetTop; document.onmousemove = (e)=>{ //用鼠标的位置减去鼠标相对元素的位置,得到元素的位置 let left = e.clientX - disX; let top = e.clientY - disY; //绑定元素位置到positionX和positionY上面 vnode.context.positionX = top; vnode.context.positionY = left; window.localStorage.setItem('top',top) window.localStorage.setItem('left',left) //移动当前元素 odiv.style.left = left + 'px'; odiv.style.top = top + 'px'; }; document.onmouseup = () => { document.onmousemove = null; document.onmouseup = null; }; }; } } } } </script> <style lang="scss" scoped> .drag{ position: relative; /*定位*/ // top: 10px; // left: 10px; width: 200px; height: 200px; background: #666; /*设置一下背景*/ } </style>
加载全部内容