draggable vue directive

Draggeable-Vue-Riective

Директива Vue (Vue.js 2.x) для обработки элемента перетаскивания.

Установка

 npm install draggable-vue-directive --save 

Демо

Вы можете просмотреть живую демонстрацию здесь: https://israelzablianov.github.io/draggable-demo

Примеры

Без обработчика

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

.vue file:

  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 file:

  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 Directive, как показано в демонстрации выше.

1. Простое использование. Просто чтобы поместить директиву на любой компонент VUE или HTML -элемент, и… бум! Элемент перетаскивается.
2. Используя обработчик. Если вы решите использовать обработчик, сам компонент будет перетаскиваться только с помощью обработчика.

OnPositionChange

Тип: Function
Требуется: false

Иногда вам нужно знать координаты элемента, пока его перетаскивают.
Передача обратного вызова в draggableValue достигнет этой цели; Во время перетаскивания элемента обратный вызов будет выполнен с помощью 3 параметров:

• positionDiff
• absolutePosition (текущая позиция; в первый раз, когда директива добавляется в DOM или инициализируется, значение будет undefined , если только элемент не имеет left и top значений)
• 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

Немедленно перестаньте перетаскиваться.

ограничение

Тип: ClientRect
Требуется: false
по умолчанию: undefined

Ограничивает перетаскивание в пределах границ прямоугольника.

ограничение

Тип: HtmlElement
Требуется: false
по умолчанию: undefined

Ограничивает перетаскивание в пределах границ элемента.

BasdingRectmargin

Тип: MarginOptions
Требуется: false
по умолчанию: undefined

При использовании boundingRect или boundingElement вы можете передавать объект с top , left , bottom и right свойствами, чтобы определить маржу между элементами и границами.