vue-device-drag v0.1.20

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使用时带有参数，如：

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>