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屬性的對像傳遞，以定義元素和邊界之間的邊距。