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

1.m ai n.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  First Time = '', lastTime = '';
    el.onmousedown = function (e) {
       VAR  disx = e.pageX - el.offsetLeft;
      var disy = e.pageY - el.offsetTo p; 
      // 给当前元素添加属性，用于元素状态的判断
      odiv. setattribute ('ele-flag', false)
      odiv.setAttribute('dra gin g-flag', true)
      firstTime = new Date().getTime();
      document.onmou SEM ove = 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.stop PR opagation()
        }
        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.t arg et.getAttribute('ele-flag')  ===  'true';
	}catch (e) {
		}
	if(isDrag){
		return;
     }
	 // 当推拽组件未在 拖动状态 执行 点击事件 
	 // todo 下面是执行点击事件的代码
   }
}
</script>
<style>
// 这里是拖拽 组件的样式
.drag{
  width:100px;
  h ei ght:100px;
  border:1px solid pink;
}
</style>

补充：vue自定义拖拽指令v-drag

<template>
  <div class="drag" v-drag ref="drag"></div>
</template>

<script>
 export  default {
  n am e: 'Home',
  data(){
    return{
      pos IT ionX:'',
      positionY:''
    }
  },
   mount ed () {
    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" sco PE d>
.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自定义指令的用法与实例解析

总结

以上是 为你收集整理的 vue.js 自定义指令（拖拽、拖动、移动） 指令 v-drag详解 全部内容，希望文章能够帮你解决 vue.js 自定义指令（拖拽、拖动、移动） 指令 v-drag详解 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于vue.js 自定义指令（拖拽、拖动、移动） 指令 v-drag详解的详细内容...