draggable vue directive

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 、フォローフィールドを含むオブジェクトにすることができます。

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

ハンドル

タイプ： HtmlElement | Vue
必須： false

上記のデモに示すように、 draggableディレクティブを使用するには2つの方法があります。

1. 簡単な使用。ディレクティブをVueコンポーネントまたはHTML要素に掲載するだけです。要素はドラッグ可能です。
2. ハンドラーを使用します。ハンドラーを使用することを選択した場合、コンポーネント自体はハンドラーを使用してのみドラッグ可能になります。

onpositionChange

タイプ： Function
必須： false

要素がドラッグされている間に、要素の座標を知る必要がある場合があります。
draggableValueにコールバックを渡すと、この目標が達成されます。要素をドラッグしている間、コールバックは3つのパラメーションで実行されます。

• positionDiff
• absolutePosition （現在の位置;指令が最初にDOMに追加されるか、初期化されたとき、要素がleftおよびtop値を持っていない限り、値はundefinedなります）
• 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と同じ機能を持っています。

resetinitialpos

タイプ： Boolean
必須： false
デフォルト： undefined

マウントする前に、要素の初期位置に戻ります。

初期位置

タイプ： Position
必須： false
デフォルト： undefined

この要素の絶対的な開始位置を設定します。
resetInitialPos trueある場合に適用されます。

停止

タイプ： Boolean
必須： false
デフォルト： undefined

すぐにドラッグを停止します。

BoundIngRect

タイプ： ClientRect
必須： false
デフォルト： undefined

長方形の境界内にドラッグすることを制約します。

BoundingElement

タイプ： HtmlElement
必須： false
デフォルト： undefined

要素の境界内にドラッグすることを制約します。

BoundingRectMargin

タイプ： MarginOptions
必須： false
デフォルト： undefined

boundingRectまたはboundingElementを使用する場合、 top 、 left 、 bottom 、およびrightプロパティを備えたオブジェクトを渡して、要素と境界の間のマージンを定義できます。