draggable vue directive

可拖动式指导

VUE指令（vue.js 2.x）用于处理元素拖放。

安装

 npm install draggable-vue-directive --save 

演示

您可以在此处查看实时演示：https：//israelzablianov.github.io/draggable-demo

例子

没有处理程序

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

.vue文件：

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

与处理程序

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

.vue文件：

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

draggable值

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

• handle
• onPositionChange
• onDragEnd
• onDragStart
• resetInitialPos
• initialPosition
• stopDragging
• boundingRect
• boundingElement
• boundingRectMargin

处理

类型： HtmlElement | Vue
必需： false

如上所述，有两种使用draggable指令的方法。

1. 简单的使用。只是将指令放在任何VUE组件或HTML元素上，然后……繁荣！该元素是可拖动的。
2. 使用处理程序。如果您选择使用处理程序，则组件本身只能使用处理程序拖动。

OnPositionChange

类型： Function
必需： false

有时，您需要在被拖动时知道元素的坐标。
向draggableValue进行回调将实现这一目标；拖动元素时，回调将使用3个参数执行：

• positionDiff
• absolutePosition （当前位置；第一次将指令添加到DOM或正在初始化时，该值将undefined ，除非该元素已left和top值）
• event （事件对象）

  import { Draggable } from 'draggable-vue-directive'
  ...
  export default {
        directives : {
            Draggable ,
        } ,
        data ( ) {
            return {
                draggableValue : {
                    onPositionChange : this . onPosChanged
                }
            } ;
        } ,
        methods : {
            onPosChanged : function ( positionDiff , absolutePosition , event ) {
                console . log ( "left corner" , absolutePosition . left ) ;
                console . log ( "top corner" , absolutePosition . top ) ;
            }
        }
  . . . 

ondragend

类型： Function
必需： false

仅在拖动结束时发出。具有与onPositionChange相同的功能。

Ondragstart

类型： Function
必需： false

仅在拖动开始时发出。具有与onPositionChange相同的功能。

重置

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

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

初始位置

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

设置此元素的绝对起始位置。
当resetInitialPos为true时，将应用。

停止

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

立即停止拖动。

边界应

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

约束拖动到矩形的边界内。

边界

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

约束将拖动到元素的边界内。

边界的RectMargin

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

当使用boundingRect或boundingElement时，您可以将具有top ， left ， bottom和right属性的对象传递，以定义元素和边界之间的边距。