Vue 实现div或者组件的拖拽功能，（PC和移动端都可以用）

1. 复制这个js到你的项目里

import Vue from 'vue';

/**
 * 1. 在调用的时候必须写v-
 * 2. 在使用的组件上或者div的位置必须是绝对的，在需要拖拽的最外层样式上加上 position: absolute;
 * 3. 在所需要的样式上使用 v-drag
 * 4. 激活之后的样式名为 v-drag-active 没有激活的样式名为 v-drag-inactive
 * 
 * @author Zhou Xinchen
 * @type {DirectiveOptions}
 */
const drag = Vue.directive('drag', {
    // 指令绑定到元素上回立刻执行bind函数，只执行一次
    bind: function (el) {

    },
    //inserted表示一个元素，插入到DOM中会执行inserted函数，只触发一次
    inserted: function (el) {
        el.onmousedown = function (e) {
            el.classList.remove('v-drag-inactive') // 没有激活的样式名
            el.classList.add('v-drag-active') // 激活之后的样式名
            let x = e.pageX - el.offsetLeft;
            let y = e.pageY - el.offsetTop;
            document.onmousemove = function (e) {
                el.style.left = e.pageX - x + 'px';
                el.style.top = e.pageY - y + 'px';
            }
            document.onmouseup = function () {
                el.classList.remove('v-drag-active')
                el.classList.add('v-drag-inactive')
                document.onmousemove = document.onmouseup = null;
            }
        }
        el.ontouchstart = function (e) {
            el.classList.remove('v-drag-inactive')
            el.classList.add('v-drag-active')
            let x = e.touches[0].pageX - el.offsetLeft;
            let y = e.touches[0].pageY - el.offsetTop;
            e.preventDefault();
            document.ontouchmove = function (e) {
                el.style.left = e.touches[0].pageX - x + 'px';
                el.style.top = e.touches[0].pageY - y + 'px';
            }
            document.ontouchend = function () {
                el.classList.remove('v-drag-active')
                el.classList.add('v-drag-inactive')
                document.ontouchmove = document.ontouchend = null;
            }
        }
    },
    updated: function (el) {
    }
})
export default drag;

2. 将这个js注册到全局main.js

import drag from '@/..你的路径.../drag';

3. 在需要使用的 div 或者组件上 添加一个 v-drag

4. 编写激活和没激活的样式 (less)

.contanier {
  margin-top: 100px;
  margin-left: 40px;
  width: 320px;
  height: 600px;

  .drag-item {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: deepskyblue;
    transform: scale(1);
  }

  .v-drag-active {
    transform: scale(1.2);
  }

  .v-drag-inactive {
    transform: scale(1);
  }
}

---

更新时间：2021-1-2