Vue中拖动任何对象– vue-drag-it-dude

Vue中拖动任何对象– vue-drag-it-dude
插件名称 vue-drag-it-dude
发布时间 2020年8月30日
插件作者 Esvalirion

Vue2组件,可让您将对象拖到所需的位置。

特征:

  • 在父对象(或文档,如果未指定父对象的大小)中拖放DOM元素
  • 接收内容大小并更新移动限制
  • 用鼠标或触摸移动都没关系
  • 发射活动和拖动事件

安装和下载:

# NPM
$ npm install vue-drag-it-dude --save

使用:

import DragItDude from 'vue-drag-it-dude';

export default {
  name: 'App',
  components: {
    DragItDude
  },
}

要么

import Vue from 'vue'
import DragItDude from 'vue-drag-it-dude'

Vue.component('vue-drag-it-dude', DragItDude)

不要忘记position: relative;为父元素添加!

<template>
  <div id="app" class="parentElement">
    <drag-it-dude
      @activated="handleActivated"
      @dragging="handleDragging"
      @dropped="handleDropped"
    >
      <div class="innerElement">{{ text }}</div>
    </drag-it-dude>
  </div>
</template>

<script>
import DragItDude from "vue-drag-it-dude";

export default {
  name: "App",
  components: {
    DragItDude
  },
  data: () => ({
    text: "Just move me!",
  }),
  methods: {
    handleActivated() {
      this.text = "I am ready for great things!";
    },
    handleDragging() {
      this.text = "Weeee!";
    },
    handleDropped() {
      this.text = "That's place is awesome!";
      setTimeout(() => {
        this.text = "Just move me!";
      }, 3000);
    }
  }
};
</script>

<style>
  .parentElement {
    position: relative;
  }
</style>