1.0.1 • Published 4 years ago
vue-drag-man v1.0.1
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>
<div class="drag">drag</div>
</Drag>
被\标签包裹的元素会成为"可放置"元素
<Drop>
<div class="drop"></div>
</Drop>
vue-drag-man使用起来非常简单,将被\包裹的元素拖入\区域内, \区域内就会生成被拖动的元素,并触发对应的事件
API
源对象(\)事件 事件 | 行为 :-: | :-: dragstart | 源对象开始拖放 drag | 源对象拖放过程中 dragend | 源对象拖放结束
目标对象(\)事件 事件 | 行为 :-: | :-: dragenter | 源对象开始进入目标对象范围内 dragover | 源对象在目标对象范围内移动 dragleave | 源对象离开目标对象的范围 drop | 源对象被拖放到目标对象内
Example
动态图&代码