draggable vue directive

draggable-vue-directivo

Directiva Vue (Vue.js 2.x) para manejar el elemento de arrastre y soltar el elemento.

Instalación

 npm install draggable-vue-directive --save 

Manifestación

Puede ver la demostración en vivo aquí: https://israelzablianov.github.io/draggable-demo

Ejemplos

Sin manejador

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

.vue Archivo:

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

Con controlador

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

.vue Archivo:

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

Valor draggable

El objeto pasado a la directiva se denomina valor de la Directiva.
Por ejemplo, en v-draggable="draggableValue" , draggableValue puede ser un objeto que contiene los campos Folowing:

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

manejar

Tipo: HtmlElement | Vue
Requerido: false

Hay dos formas de usar la directiva draggable , como se muestra en la demostración anterior.

1. El uso simple. Solo para poner la directiva en cualquier componente VUE o elemento HTML, y ... ¡BOOM! El elemento es arrastrable.
2. Usando un controlador. Si elige usar un controlador, el componente en sí solo será arrastrable usando el controlador.

cambio en la oposición

Tipo: Function
Requerido: false

A veces necesitas conocer las coordenadas del elemento mientras se arrastran.
Pasar una devolución de llamada a draggableValue logrará este objetivo; Al arrastrar el elemento, la devolución de llamada se ejecutará con 3 parámetros:

• positionDiff
• absolutePosition (la posición actual; la primera vez que se agrega la Directiva al DOM o se inicializa, el valor estará undefined , a menos que el elemento tenga valores left y top )
• event (el objeto de evento)

  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

Tipo: Function
Requerido: false

Emite solo cuando se arrastra los extremos. Tiene la misma funcionalidad que onPositionChange .

estadista

Tipo: Function
Requerido: false

Emite solo cuando comienza el arrastre. Tiene la misma funcionalidad que onPositionChange .

ResetinitialPos

Tipo: Boolean
Requerido: false
Valor predeterminado: undefined

Vuelve a la posición inicial del elemento, antes de que se monte.

posición inicial

Tipo: Position
Requerido: false
Valor predeterminado: undefined

Establece la posición inicial absoluta de este elemento.
Se aplicará cuando resetInitialPos sea true .

parar

Tipo: Boolean
Requerido: false
Valor predeterminado: undefined

Deja de arrastrar inmediatamente.

límites

Tipo: ClientRect
Requerido: false
Valor predeterminado: undefined

Restringe arrastrar hacia los límites del rectángulo.

elimento del límite

Tipo: HtmlElement
Requerido: false
Valor predeterminado: undefined

Restringe arrastrar hacia los límites del elemento.

LimitrectMargin

Tipo: MarginOptions
Requerido: false
Valor predeterminado: undefined

Al usar boundingRect o boundingElement , puede pasar un objeto con propiedades top , left , bottom y right , para definir un margen entre los elementos y los límites.