vue中如何定义自定义拖拽指令

当一个dialog弹窗不能拖拽的时候将是多么痛苦的时刻

因此只要在src文件夹中新建directive文件夹再新建drag.js文件,写入如下代码,就能实现自定义拖拽指令

import Vue from 'vue';
Vue.directive('drag',{
  bind:function(el){},
  inserted:function(el){
    el.onmousedown = function (e) {
      var disx = e.pageX - el.offsetLeft;
      var disy = e.pageY - el.offsetTop;
      document.onmousemove = function (e) {
        el.style.left = e.pageX - disx + 'px';
        el.style.top = e.pageY - disy + 'px';
      }
      document.onmouseup = function () {
        document.onmousemove = document.onmouseup = null;
      }
    }
  },
  updated:function(el) {}
})


版权声明:本文为Mr__proto__原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。