vue的自定义指令directives及自定义指令简单实现拖拽功能

1、局部自定义指令，实现拖拽

<template>
  <div style="100%">
    <!-- 自定义指令绑定元素 -->
    <button v-drag>拖拽</button>
  </div>
</template>

<script>
export default {
  name: "List",
  data() {
    return {};
  },
  directives: {
    // drag指令名称  
    drag: {
    //   el指令绑定的dom元素
      inserted: function(el) {
        el.style.position = "absolute";
        // e对应事件对象
        el.onmousedown = e => {
            // 按下鼠标
          var ex = e.clientX - el.offsetLeft;
          var ey = e.clientY - el.offsetTop;
          el.onmousemove = e => {
            // 移动鼠标
            var ex1 = e.clientX - ex;
            var ey1 = e.clientY - ey;
            el.style.left = ex1 + "px";
            el.style.top = ey1 + "px";
          };
          el.onmouseup = e => {
            // 抬起鼠标
            el.onmousemove = null;
          };
        };
      }
    }
  }
};
</script>

附截图：

2、全局自定义指令以及多个指令的使用

1）新建js文件directive，内容如下：

import Vue from "vue";
const Drag1=Vue.directive(
    'drag1',{
      inserted: function(el) {
        el.style.position = "absolute";
        el.onmousedown = e => {
          var ex = e.clientX - el.offsetLeft;
          var ey = e.clientY - el.offsetTop;
          el.onmousemove = e => {
              var ex1=e.clientX-ex
              var ey1=e.clientY-ey
              el.style.left=ex1+'px'
              el.style.top=ey1+'px'
          };
          el.onmouseup=e=>{
              el.onmousemove=null
          }
        };
      }
    }
)
const Drag2=Vue.directive(
    'drag2',{
      inserted: function(el) {
        el.style.position = "absolute";
        el.onmousedown = e => {
          var ex = e.clientX - el.offsetLeft;
          var ey = e.clientY - el.offsetTop;
          el.onmousemove = e => {
              var ex1=e.clientX-ex
              var ey1=e.clientY-ey
              el.style.left=ex1+'px'
              el.style.top=ey1+'px'
          };
          el.onmouseup=e=>{
              el.onmousemove=null
          }
        };
      }
    }
)
export default{
  Drag1,
  Drag2
}

2）在main.js中引入js文件

import "./lib/directives"

3）在需要使用的vue文件中正常使用

<button v-drag1>自定义事件</button>

vue的自定义指令directives及自定义指令简单实现拖拽功能

相关推荐