vue-drag-man

Installation

npm install vue-drag-man --save

什么是vue-drag-man

vue-drag-man是一个简洁的Vue拖放组件，通过标签简单的包裹，即可轻易快速地实现拖放功能

为什么需要vue-drag-man

时间来到2020年，社区中已经有了很多诸如vuedraggable、Sortable等功能强大的拖放组件，那么我们再写一个的意义是什么。作者曾经也找过/用过许多拖拽组件，总体用下来，体会是我们其实不需要那么多眼花缭乱的API，我们只想让这个拖放过程“自然”一点，而vue-drag-man就专注于封装拖拽过程，至于拖放前后那些花里胡哨的操作，全部交由使用者实现。

用法

被<Drag>标签包裹的元素会成为"可拖拽"元素

<Drag>
    <div class="drag">drag</div>
</Drag>

被<Drop>标签包裹的元素会成为"可放置"元素

<Drop>
    <div class="drop"></div>
</Drop>

vue-drag-man使用起来非常简单,将被<Drag>包裹的元素拖入<Drop>区域内, <Drop>区域内就会生成被拖动的元素,并触发对应的事件

API

源对象(<Drag>)事件 事件 | 行为 :-: | :-: dragstart | 源对象开始拖放 drag | 源对象拖放过程中 dragend | 源对象拖放结束

目标对象(<Drop>)事件 事件 | 行为 :-: | :-: dragenter | 源对象开始进入目标对象范围内 dragover | 源对象在目标对象范围内移动 dragleave | 源对象离开目标对象的范围 drop | 源对象被拖放到目标对象内

Example

动态图&代码

Customize configuration

See Configuration Reference.