draggable vue directive

draggable-vue-directif

Vue Directive (vue.js 2.x) pour gérer l'élément glisser-déposer.

Installation

 npm install draggable-vue-directive --save 

Démo

Vous pouvez voir la démo en direct ici: https://israelzablianov.github.io/draggable-demo

Exemples

Sans gestionnaire

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

.vue Fichier:

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

Avec gestionnaire

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

.vue Fichier:

  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 ] ;
        }
  ...

valeur draggable

L'objet transmis à la directive est appelé la valeur de la directive.
Par exemple, dans v-draggable="draggableValue" , draggableValue peut être un objet contenant les champs de suit:

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

poignée

Type: HtmlElement | Vue
Requis: false

Il existe deux façons d'utiliser la directive draggable , comme le montre la démo ci-dessus.

1. L'utilisation simple. Juste pour mettre la directive sur n'importe quel composant Vue ou élément HTML, et… boom! L'élément est draggable.
2. En utilisant un gestionnaire. Si vous choisissez d'utiliser un gestionnaire, le composant lui-même ne sera que draggable à l'aide du gestionnaire.

ONPOSITION

Type: Function
Requis: false

Parfois, vous devez connaître les coordonnées de l'élément pendant qu'elle est traînée.
Passer un rappel à draggableValue atteindra cet objectif; Tout en faisant glisser l'élément, le rappel sera exécuté avec 3 paramètres:

• positionDiff
• absolutePosition (la position actuelle; la première fois que la directive est ajoutée au DOM ou en étant initialisée, la valeur ne sera undefined , sauf si l'élément a left et les valeurs top )
• event (l'objet de l'événement)

  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 ) ;
            }
        }
  . . . 

déconcerter

Type: Function
Requis: false

N'émet que lorsque la traînée se termine. A la même fonctionnalité que onPositionChange .

Ondragstart

Type: Function
Requis: false

N'émet que lorsque la traînée commence. A la même fonctionnalité que onPositionChange .

resetinitialpos

Type: Boolean
Requis: false
par défaut: undefined

Revient à la position initiale de l'élément, avant qu'il ne soit monté.

position initiale

Type: Position
Requis: false
par défaut: undefined

Définit la position de départ absolu de cet élément.
Sera appliqué lorsque resetInitialPos est true .

masse

Type: Boolean
Requis: false
par défaut: undefined

Arrêtez immédiatement de faire glisser.

bendingrect

Type: ClientRect
Requis: false
par défaut: undefined

Constituer le glisser vers les limites du rectangle.

libelndingelement

Type: HtmlElement
Requis: false
par défaut: undefined

Constituer le glisser vers les limites de l'élément.

lindingrectmargin

Type: MarginOptions
Requis: false
par défaut: undefined

Lorsque vous utilisez boundingRect ou boundingElement , vous pouvez passer un objet avec des propriétés top , left , bottom et right , pour définir une marge entre les éléments et les limites.