vue.js 自定义指令（拖拽、拖动、移动） 指令 v-drag详解

1.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">
     我是拖拽的divdiv>
    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>
    

到此这篇关于vue.js 自定义指令（拖拽、拖动、移动） 指令 v-drag的文章就介绍到这了,更多相关vue.js 自定义指令内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• Vue.js自定义指令的基本使用详情
• Vue.js directive自定义指令详解
• Vue.js源码分析之自定义指令详解
• 详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
• vue.js内部自定义指令与全局自定义指令的实现详解（利用directive）
• Vue.js自定义指令的用法与实例解析

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！