@willie-wan/v-draggable

Installation

npm install  @willie-wan/v-draggable --save

Examples

1

<div v-draggable>
    可拖拽的容器
</div>

.vue file:

  import { Draggable } from ' @willie-wan/v-draggable'
  ...
  export default {
        directives: {
            Draggable,
        },
  ...

2

<div v-draggable="draggableValue">
    <div :ref="handleId">
        <img src="../assets/move.svg" alt="move">
    </div>
    使用 handler
</div>

.vue file:

  import { Draggable } from ' @willie-wan/v-draggable'
  ...
  export default {
        directives: {
            Draggable,
        },
        data() {
            return {
                handleId: "handle-id",
                draggableValue: {
                    handle: undefined
                }
            };
        },
        mounted() {
            this.draggableValue.handle = this.$refs[this.handleId];
        }
  ...

draggable 参数

指令绑定值参数

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

handle

Type: HtmlElement | Vue Required: false 可拖动的元素或者组件可以触发拖动的元素，默认值是整个元素，传入具体的HtmlElement则只会在该元素区域驱动才能触发。

onPositionChange

Type: Function(positionDiff,absolutePosition,event) Required: false

拖动时位置改变的回调函数

  import { Draggable } from ' @willie-wan/v-draggable'
  ...
  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

Type: Function Required: false

拖拽结束时的回调函数，参数同[onPositionChange]

onDragStart

Type: Function Required: false 拖拽开始时回调函数， 参数同[onPositionChange]

resetInitialPos

Type: Boolean Required: false default: undefined

重置为组件挂载前的位置

initialPosition

Type: Position Required: false default: undefined

是否设置为绝对定位

stopDragging

Type: Boolean Required: false default: undefined

是否立即停止拖拽

boundingRect

Type: ClientRect Required: false default: undefined

可拖动矩形区域限制

boundingElement

Type: HtmlElement Required: false default: undefined

是否限制拖动到元素的范围内

boundingRectMargin

Type: MarginOptions Required: false default: undefined

用于定义元素和边界之间的空白

@willie-wan/v-draggable