您的位置:首页 > 教程 > JavaScript > vue.js 自定义指令(拖拽、拖动、移动) 指令 v-drag详解

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

2023-01-23 11:06:58 来源:易采站长站 作者:

1.main.js文件中添加已下代码Vue.directive('drag',{//1.指令绑定到元素上回立刻执行bind函数,只执行一次//2.每个函数中第一个参数永远是el,表示绑定指令...

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-flajavascriptg', 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>

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

如有侵权,请发邮件到 [email protected]

相关文章

  • vue跳转页面的几种方法(推荐)

    vue跳转页面的几种方法(推荐)

    vue跳转不同页面的多种方法 1:router-link跳转 !-- 直接跳转 --router-link to='/testDemo' button点击跳转2/button/router-link !-- 带参数跳转 --router-link :to="{path:'testDemo',query:{setid:123456}}" button点击跳转
    2020-03-26
  • Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除

    Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除

    最近有使用vue+elementUI实现多图片上传的需求,遂做此纪录。 本次主要写一下前端的实现细节,至于后台以Multipart[ ]数组接收即可,不再赘述,网上一搜大把文章可供参考。 本次使用
    2020-03-23
  • 微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能

    微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能

    上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 view class='page_row' bindtap="suo" view class="search" view class="df search_arr" icon class="searchcion" size='20' type='search'/
    2020-03-10
  • 微信小程序实现canvas分享朋友圈海报

    微信小程序实现canvas分享朋友圈海报

    本文实例为大家分享了微信小程序分享朋友圈海报的具体代码,供大家参考,具体内容如下 思路:生成朋友圈海报放在公共文件,首先需要绘制canvas,点击分享朋友圈按钮,在手机屏幕
    2020-06-21
  • 详解ES6 Modules

    详解ES6 Modules

    当下, 我们几乎所有的项目都是基于 webpack、rollup 等构建工具进行开发的,模块化已经是常态。 我们对它并不陌生,今天,我们就再系统的回顾一下ES6的模块机制, 并总结下常用的操
    2020-07-04
  • Vue-router 报错NavigationDuplicated的解决方法

    Vue-router 报错NavigationDuplicated的解决方法

    版本:3.1.x 报错原因: 使用push()、replace()进行导航时,不能重复导航到当前路由。 解决办法: 方法1:在定义路由的文件中router/index.js const originalPush = VueRouter.prototype.pushVueRouter.protot
    2020-03-31
  • vue使用better-scroll实现滑动以及左右联动

    vue使用better-scroll实现滑动以及左右联动

    本文实例为大家分享了vue实现滑动以及左右联动效果的具体代码,供大家参考,具体内容如下 一、首先需要在项目中引入better-scroll 1. 在package.json 直接写入 "better-scroll":"^1.15.1" 版本以
    2020-06-30
  • Vue如何提升首屏加载速度实例解析

    Vue如何提升首屏加载速度实例解析

    在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响
    2020-06-25