vue实现拖拽指令 v-drag

描述

实现元素拖拽功能

实现

1. 创建拖拽指令文件 drag.js

// directives/drag.js
import Vue from 'vue';

Vue.directive('drag', {
  bind(el, binding) {
    el.setAttribute('draggable', true);
    el.addEventListener('dragstart', (e)=> {
      el.style.position = 'fixed';
      // 元素右上角位置与拖拽开始时点击拖拽的位置间的距离
      el.dataset.distanceY = e.clientY - el.offsetTop;
      el.dataset.distanceX = e.clientX - el.offsetLeft;
    });
    el.addEventListener('dragend', (e)=> {
      el.style.top = e.clientY - el.dataset.distanceY + 'px';
      el.style.left = e.clientX - el.dataset.distanceX + 'px';
    });
  },
});

2. 将该指令文件进入主入口main.js中

// main.js
import '@/directives/drag';

3.使用拖拽指令

<div v-drag>请拖动我</div>