draggable vue directive

draggierbar-vue-lichtend

VUE -Direktive (Vue.js 2.x) zum Handling Element Drag & Drop.

Installation

 npm install draggable-vue-directive --save 

Demo

Sie können die Live-Demo hier anzeigen: https://israelzablianov.github.io/draggable-demo

Beispiele

Ohne Handler

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

.vue -Datei:

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

Mit Handler

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

.vue -Datei:

  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 Wert

Das an die Richtlinie übergebene Objekt wird als Wert der Richtlinie bezeichnet.
Beispielsweise kann v-draggable="draggableValue" ein Objekt sein, draggableValue die Following Felder enthält:

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

handhaben

Typ: HtmlElement | Vue
Erforderlich: false

Es gibt zwei Möglichkeiten, die draggable Richtlinie zu verwenden, wie in der obigen Demo gezeigt.

1. Die einfache Verwendung. Nur um die Richtlinie auf eine Vue -Komponente oder ein HTML -Element zu setzen, und… Boom! Das Element ist draggierbar.
2. Mit einem Handler. Wenn Sie einen Handler verwenden, ist die Komponente selbst nur mit dem Handler dragzierbar.

OnpositionChange

Typ: Function
Erforderlich: false

Manchmal müssen Sie die Koordinaten des Elements kennen, während es gezogen wird.
Wenn Sie einen Rückruf an draggableValue weitergeben, wird dieses Ziel erreicht. Während des Ziehens des Elements wird der Rückruf mit 3 Params ausgeführt:

• positionDiff
• absolutePosition (die aktuelle Position; Das erste Mal, dass die DIM -Richtlinie zum DOM hinzugefügt wird oder initialisiert wird, wird der Wert undefined , es sei denn, das Element hat left und top Werte)
• event (das Ereignisobjekt)

  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

Typ: Function
Erforderlich: false

Emittiert nur, wenn Sie enden. Hat die gleiche Funktionalität wie onPositionChange .

Ondragstart

Typ: Function
Erforderlich: false

Emittiert nur, wenn das Ziehen beginnt. Hat die gleiche Funktionalität wie onPositionChange .

Resetinitialpos

Typ: Boolean
Erforderlich: false
Standard: undefined

Kehrt zur Anfangsposition des Elements zurück, bevor es montiert wird.

Anfangszahlung

Typ: Position
Erforderlich: false
Standard: undefined

Legt die absolute Ausgangsposition dieses Elements fest.
Wird angewendet, wenn resetInitialPos true ist.

Stopmaging

Typ: Boolean
Erforderlich: false
Standard: undefined

Sofort aufhören zu schleppen.

Begrenzung

Typ: ClientRect
Erforderlich: false
Standard: undefined

Beschränken das Ziehen in die Grenzen des Rechtecks.

Begrenzung

Typ: HtmlElement
Erforderlich: false
Standard: undefined

Einschränken das Ziehen in die Grenzen des Elements.

Begrenzung

Typ: MarginOptions
Erforderlich: false
Standard: undefined

Bei Verwendung boundingRect oder boundingElement können Sie ein Objekt mit top , left , bottom und right Eigenschaften übergeben, um einen Rand zwischen den Elementen und den Grenzen zu definieren.