vue组件拖拽任意位置

1.安装

npm install vue-drag-it-dude --save

2.引入

在组件中引入

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)

3.使用

<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>

4.属性

width  类型：Number   必需：false   默认值：0
      动态更改内部 DOM 元素的宽度

      <drag-it-dude :width="40"></drag-it-dude>

height 类型：Number   必需：false  默认值：0
      动态更改内部 DOM 元素的高度

      <drag-it-dude :height="40"></drag-it-dude>

parentWidth  类型：Number  必需：false   默认值：0
            限制元素可在其中移动的区域宽度

            <drag-it-dude :parent-width="500"></drag-it-dude>

parentHeight  类型：Number  必需：false   默认值：0
            限制元素可在其中移动的区域高度

            <drag-it-dude :parent-height="500"></drag-it-dude>

5.事件

activated   激活元素时调用

<drag-it-dude @activated="someFunction"></drag-it-dude>


dragging    元素拖动时调用

<drag-it-dude @dragging="someAnotherFunction"></drag-it-dude>


dropped   元素释放时调用

<drag-it-dude @dropped="someOtherFunction"></drag-it-dude>