draggable vue directive

드래그 가능한 vue 유사성

요소 드래그 앤 드롭을 처리하기위한 vue directive (vue.js 2.x).

설치

 npm install draggable-vue-directive --save 

데모

https://israelzablianov.github.io/draggable-demo를 여기에서 볼 수 있습니다

예

핸들러없이

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

.vue 파일 :

  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 파일 :

  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 지시문을 사용하는 두 가지 방법이 있습니다.

1. 간단한 사용. VUE 구성 요소 또는 HTML 요소에 지침을 넣고… 붐! 요소는 드래그 가능합니다.
2. 핸들러 사용. 핸들러를 사용하기로 선택한 경우 구성 요소 자체는 핸들러를 사용하여 드래그 가능합니다.

OnPositionChange

유형 : Function
필수 : false

때로는 요소가 드래그하는 동안 요소의 좌표를 알아야합니다.
draggableValue 에 콜백을 전달하면이 목표가 달성됩니다. 요소를 드래그하는 동안 콜백은 3 개의 매개 변수로 실행됩니다.

• positionDiff
• absolutePosition (현재 위치; 지침이 DOM에 처음 추가되거나 초기화되는 경우 요소가 left 및 top 값이없는 한 값은 undefined 되지 않습니다)
• 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 와 동일한 기능이 있습니다.

재설정

유형 : Boolean
필수 : false
기본값 : undefined

요소가 장착되기 전에 요소의 초기 위치로 돌아갑니다.

초기 위치

유형 : Position
필수 : false
기본값 : undefined

이 요소의 절대 시작 위치를 설정합니다.
resetInitialPos true 일 때 적용됩니다.

드래그 중지

유형 : Boolean
필수 : false
기본값 : undefined

즉시 드래그를 중지하십시오.

boundingRect

유형 : ClientRect
필수 : false
기본값 : undefined

직사각형의 한계 내에서 드래그하는 제약.

경계

유형 : HtmlElement
필수 : false
기본값 : undefined

요소의 한계 내에서 드래그하는 것을 제한합니다.

bindingRectMargin

유형 : MarginOptions
필수 : false
기본값 : undefined

boundingRect 또는 boundingElement 사용할 때는 top , left , bottom 및 right 속성이있는 객체를 전달하여 요소와 경계 사이의 여백을 정의 할 수 있습니다.