@willie-wan/v-draggable NPM

@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

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

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