vue-device-drag

简介

基于Vue2、3，整合了mouse、touch而成的拖拽指令，便于一套代码同时应用于pc端和设备端

使用方法

npm install vue-device-drag

vue2：

import DeviceDrag from "vue-device-drag";

Vue.use(DeviceDrag)

vue3：

import { createApp } from 'vue'
import App from './App.vue'
import { vue3 as DeviceDrag } from "vue-device-drag";

createApp(App).use(DeviceDrag).mount("#app");

作用于拖拽元素的指令

指令名	说明	指令的绑定值类型
device-drag	启用拖拽功能，需要拖拽的元素必须有	×
device-drag-delay	延迟拖拽的时间（ms），注意：mouse-delay、touch-delay指令优先级大于该指令	Number
device-drag-mouse-delay	当拖拽的为鼠标事件的时候，延迟拖拽的时间（ms）	Number
device-drag-touch-delay	当拖拽的为触摸事件的时候，延迟拖拽的时间（ms）	Number
device-drag-disable	动态控制是否允许拖动	Boolean
device-drag-data	指定该元素触发拖拽相关指令时，绑定的数据	String / Number / Boolean / Object
device-drag-start	指定元素触发拖拽开始指令时，调用的方法	Function
device-drag-end	指定元素触发拖拽结束指令时，调用的方法	Function

作用于目标元素的指令

指令名	说明	指令的绑定值类型
device-drag	启用拖拽功能，需要拖拽的元素必须有	×
device-drag-disable	动态控制是否允许拖动	Boolean
device-drag-data	指定该元素触发拖拽相关指令时，绑定的数据	String / Number / Boolean / Object
device-drag-enter	指定拖拽元素进入目标元素时，调用的方法	Function
device-drag-over	指定拖拽元素在目标元素上移动时，调用的方法	Function
device-drag-leave	指定拖拽元素离开目标元素时，调用的方法	Function
device-drop	指定拖拽元素在目标元素上结束拖拽时，调用的方法	Function

事件类指令调用绑定的方法时，传入的参数中带有以下参数

参数名	说明	数据类型
eventName	若使用指令时，有传入指令参数，则值为指令参数，否则为空	String
clientX	事件触发时，鼠标的位置	Number
clientY	事件触发时，鼠标的位置	Number
pointEl	事件触发时，鼠标所在的元素（不代表一定是事件触发的元素）	Element
dragEl	拖拽元素	Element
data	拖拽元素使用device-drag-data绑定的数据	String / Number / Boolean / Object
target	目标元素	Element
targetData	目标元素使用device-drag-data绑定的数据	String / Number / Boolean / Object

指令参数

当指令device-drag使用时带有参数，如：

v-device-drag:test

则只有带有相同参数test的事件指令才会被触发，如：

v-device-drag-start:test="doSomething"

v-device-drag-end:test="doSomething"

v-device-drag-enter:test="doSomething"

v-device-drag-over:test="doSomething"

v-device-drag-leave:test="doSomething"

v-device-drop:test="doSomething"

事件指令可通过增加修饰符stop来阻止事件的冒泡传递，如：

v-device-drag-over:test.stop="doSomething"

判断是否正在拖拽过程中

if (this.$deviceDrag) {
    // 拖拽过程中
}

使用示例

<template>
  <div id="app">
    <div
        v-device-drag-data="{ groupId: 1 }"
        v-device-drag-enter="dragOver"
        v-device-drag-over="dragOver"
        v-device-drag-leave="dragEnd"
        v-device-drop="drop"
        :class="['group', 'group1', { 'is-over': overGroupId === 1 }]">
      <img
          v-device-drag
          v-device-drag-end="dragEnd"
          alt="Vue logo"
          src="./assets/logo.png">
    </div>
    <div
        v-device-drag-data="{ groupId: 2 }"
        v-device-drag-enter="dragOver"
        v-device-drag-over="dragOver"
        v-device-drag-leave="dragEnd"
        v-device-drop="drop"
        :class="['group', 'group2', { 'is-over': overGroupId === 2 }]"
    ></div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      overGroupId: null,
      group1: [],
      group2: []
    }
  },
  methods: {
    dragOver(event) {
      this.overGroupId = event.targetData.groupId
    },
    dragEnd() {
      this.overGroupId = null
    },
    drop(event) {
      event.target.append(event.dragEl)
    }
  }
}
</script>

<style>
#app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.group {
  width: 300px;
  height: 300px;
  border: 1px solid #cccccc;
  margin: 10px auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  transition: background-color 0.2s linear;
}

.group.is-over {
  background-color: aliceblue;
}
</style>