draggable vue directive

Draggable-Vue-Directive

Diretiva Vue (Vue.js 2.x) para manusear o elemento arrasto e soltar.

Instalação

 npm install draggable-vue-directive --save 

Demonstração

Você pode ver a demonstração ao vivo aqui: https://israelzablianov.github.io/draggable-demo

Exemplos

Sem manipulador

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

.vue arquivo:

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

Com manipulador

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

.vue arquivo:

  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

O objeto passado para a diretiva é chamado de valor da diretiva.
Por exemplo, em v-draggable="draggableValue" , draggableValue pode ser um objeto que contém os campos seguintes:

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

lidar

Tipo: HtmlElement | Vue
Necessário: false

Existem duas maneiras de usar a diretiva draggable , como mostrado na demonstração acima.

1. O uso simples. Só para colocar a diretiva em qualquer componente Vue ou elemento HTML e ... boom! O elemento é arrastado.
2. Usando um manipulador. Se você optar por usar um manipulador, o próprio componente só poderá ser arrastado usando o manipulador.

OnPositionChange

Tipo: Function
Necessário: false

Às vezes, você precisa conhecer as coordenadas do elemento enquanto ele está sendo arrastado.
Passar um retorno de chamada para draggableValue atingirá esse objetivo; Ao arrastar o elemento, o retorno de chamada será executado com 3 params:

• positionDiff
• absolutePosition (a posição atual; a primeira vez que a diretiva é adicionada ao DOM ou sendo inicializada, o valor será undefined , a menos que o elemento tenha left e os valores top )
• event (o 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
Necessário: false

Emite apenas quando arrastar termina. Tem a mesma funcionalidade que onPositionChange .

ONDRAGSTART

Tipo: Function
Necessário: false

Emite apenas quando o arrasto começa. Tem a mesma funcionalidade que onPositionChange .

Resetinitialpos

Tipo: Boolean
Necessário: false
Padrão: undefined

Retorna para a posição inicial do elemento, antes de ser montado.

InitialPosition

Tipo: Position
Necessário: false
Padrão: undefined

Define a posição inicial absoluta desse elemento.
Será aplicado quando resetInitialPos é true .

stopdragging

Tipo: Boolean
Necessário: false
Padrão: undefined

Pare imediatamente de arrastar.

BoundingRect

Tipo: ClientRect
Necessário: false
Padrão: undefined

Restringe arrastando para dentro dos limites do retângulo.

BoundingElement

Tipo: HtmlElement
Necessário: false
Padrão: undefined

Restringe arrastando para dentro dos limites do elemento.

BoundingRectMargin

Tipo: MarginOptions
Necessário: false
Padrão: undefined

Ao usar boundingRect ou boundingElement , você pode passar por um objeto com propriedades top , left , bottom e right , para definir uma margem entre os elementos e os limites.