vue组件拖拽任意位置

Vue-Drag-it-Dude (vue-drag-it-dude)

Vue2 component, that allows you to drag object wherever you want.

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

这可以做什么 (What this can do)

• Drag and drop DOM elements inside parent (or document, if parent's size not specified)

  在父对象(或文档，如果未指定父对象的大小)中拖放DOM元素

• Receive content sizes and update move restrictions

  接收内容大小并更新移动限制

• Move with mouse, or with touch, it's not matter

  用鼠标或触摸移动都没关系

• Emit active and drag events

  发出活动和拖动事件

安装 (Install)

via NPM

通过NPM

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

用法 (Usage)

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

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

or

要么

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

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

Don't forget to add position: relative; for parent element!

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

现在使用它！ (Now use it!)

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

道具 (Props)

width (width)

type: Number Required: false Default: 0

类型： Number必需：false默认值：0

If you want to dynamically change inner DOM element width, just type something like:

如果要动态更改内部DOM元素的宽度，只需键入以下内容：

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

height (height)

type: Number Required: false Default: 0

类型： Number必需：false默认值：0

If you want to dynamically change inner DOM element height, just type something like:

如果要动态更改内部DOM元素的高度，只需键入以下内容：

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

parentWidth (parentWidth)

type: Number Required: false Default: parentNode.offsetWidth of draggable element

类型： Number必需：false默认值：可拖动元素的parentNode.offsetWidth

If you want to limit width of area, within which an element can move:

如果要限制元素可在其中移动的区域宽度：

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

parentHeight (parentHeight)

type: Number Required: false Default: parentNode.offsetHeightof draggable element

类型： Number必需：false默认值： parentNode.offsetHeight元素的parentNode.offsetHeight

If you want to limit height of area, within which an element can move:

如果要限制元素可以在其中移动的区域高度：

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

大事记 (Events)

activated (activated)

Required: false

必填：false

Called, when element is activated

激活元素时调用

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

dragging (dragging)

Required: false

必填：false

Called, when element is draggeing

元素拖动时调用

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

dropped (dropped)

Required: false

必填：false

Called, when element release

元素释放时调用

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

翻译自: https://vuejsexamples.com/vue2-component-that-allows-you-to-drag-object-wherever-you-want/

vue组件拖拽任意位置