vue给元素添加指令_Vue指令，用于处理元素拖放

vue给元素添加指令

可拖动的vue指令 (draggable-vue-directive)

Vue2 directive that handles drag & drop.

处理拖放的Vue2指令。

入门 (Getting Started)

npm install draggable-vue-directive --save

典型用途： (Typical use:)

<div v-draggable>
    classic draggable
</div>

.vue file:

.vue文件：

import { Draggable } from 'draggable-vue-directive'
  ...
  export default {
        directives: {
            Draggable,
        },
  ...

与处理程序： (with handler:)

<div v-draggable="draggableValue">
    <div :ref="handleId">
        <img src="../assets/move.svg" alt="move">
    </div>
    drag and drop using handler
</div>

.vue file:

.vue文件：

import { Draggable } from 'draggable-vue-directive'
  ...
  export default {
        directives: {
            Draggable,
        },
        data() {
            return {
                handleId: "handle-id",
                draggableValue: { };
            }
        },
        mounted() {
            this.draggableValue.handle = this.$refs[this.handleId];
        }
  ...

可拖动值 (draggable Value)

The object passed to the directive is called the directive value. For example in v-draggable="draggableValue" draggableValue can be an object containing the folowing fields:

传递给指令的对象称为指令值。 例如，在v-draggable="draggableValue" draggableValue可以是包含以下字段的对象：

处理 (handle)

Type: HtmlElement | Vue Required: false

类型： HtmlElement | Vue 需要HtmlElement | Vue ： false

There are two ways to use the draggable-vue-directive as showen in the demo above. The simple use is just to put the directive on any Vue component or Html element and boom! the element is draggable. The second option is to use handler. if you choose to use handler, the component itself will be draggable only using the handler.

如上面的演示所示，有两种方法可以使用draggable-vue指令。 简单的用法就是将指令放置在任何Vue组件或HTML元素上，然后繁荣！ 该元素是可拖动的。 第二种选择是使用处理程序。 如果选择使用处理程序，则组件本身只能使用处理程序进行拖动。

onPositionChange (onPositionChange)

Type: Function Required: false

类型： Function必填： false

In some cases it is useful to know the coordinates of the element when it's been dragged. Passing a callback to draggableValue will achieve this goal and every time the element is being dragged the callback will be executed with the current position as param.

在某些情况下，了解拖动元素时的坐标很有用。 将回调传递给draggableValue将实现此目标，并且每次拖动元素时，都会以当前位置作为参数来执行回调。

import { Draggable } from 'draggable-vue-directive'
  ...
  export default {
        directives: {
            Draggable,
        },
        data() {
            return {
                handleId: "handle-id",
                draggableValue: { };
            }
        },
        mounted() {
            this.draggableValue.handle = this.$refs[this.handleId];
            this.draggableValue.onPositionChange = this.onPosChanged;
        },
        methods: {
            onPosChanged: function(pos) {
                console.log("left corner", pos.x);
                console.log("top corner", pos.y);
            }
        }
  ...

resetInitialPos (resetInitialPos)

Type: Boolean Required: false default: undefined

类型： Boolean必需： false缺省值： undefined

Returns to the initial position the element was before mounted.

返回到元素在安装之前的初始位置。

stopDragging (stopDragging)

Type: Boolean Required: false default: undefined

类型： Boolean必需： false缺省值： undefined

Immediately stop dragging.

立即停止拖动。

boundingRect (boundingRect)

Type: ClientRect Required: false default: undefined

类型： ClientRect必需： false默认值： undefined

Constrains dragging to within the bounds of the rectangle.

限制拖动到矩形的边界内。

翻译自: https://vuejsexamples.com/vue-directive-for-handling-element-drag-and-drop/

vue给元素添加指令