vue指令--拖拽例子

drag.js

  bind(el, binding) {
    const div = el;
    let is_moving = false;
    div.onmousedown = (e) => {
      const oDiv = e.target;        // 获取目标元素;
      const disX = e.clientX - oDiv.offsetLeft;
      const disY = e.clientY - oDiv.offsetTop;
      is_moving = true;
      document.onmousemove = (e) => {
        let left = e.clientX - disX;
        let top = e.clientY - disY;
        // 移动当前元素
        if (is_moving) {
          if (left <= 0) {
            left = 0;
          } else if (left >= document.documentElement.clientWidth - oDiv.offsetWidth) {
            // document.documentElement.clientWidth 屏幕的可视宽度
            left = document.documentElement.clientWidth - oDiv.offsetWidth;
          }
          if (top <= 0) {
            top = 0;
          } else if (top >= document.documentElement.clientHeight - oDiv.offsetHeight) {
            // document.documentElement.clientHeight 屏幕的可视高度
            top = document.documentElement.clientHeight - oDiv.offsetHeight;
          }
          div.style.left = left + 'px';
          div.style.top = top + 'px';
        }
      };
      document.onmouseup = (e) => {
        is_moving = false;
        div.onmousemove = null;
        div.onmouseup = null;
      };
      // return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
      return false;
    };
  },
  unbind(el, bing) {

  }
}

index.js

import drag from './drag';

const plugin = {};
plugin.install = function (Vue, options = {}) {
  Vue.directive("drag", drag);
};
export default plugin;

// 通过调用全局方法 Vue.use() 使用插件：

样式

.index__img{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 150px;
  height: 150px;
  background-color: #333;
}

main.js 全局引入

import drag from './directive/drag/index';
Vue.use(drag);

使用

 <div class="index__img" v-drag></div>