0.1.0 • Published 5 years ago
vue2-drag v0.1.0
vue2-drag
Vue component for drag and drop
Demo
Install
yarn add vue2-drag
Usage
import Vue from 'vue'
import VueDrag from 'vue2-drag'
Vue.use(VueDrag)
Props
styleList
Type: Array
Required: false
Default:
[{
left: "50px",
top: "50px",
width: "50px",
height: "50px",
backgroundColor: "aqua",
zIndex: 0
}]
css样式数组,根据数组长度创建相应个数的拖放元素
htmlList
Type: Array
Required: false
Default: ["drag-drop"]
组件内容数组,长度和styleList相同,对应每个拖放元素的内容
moveZIndex
Type: Number
Required: false
Default: 100
拖放元素移动时的z-index
<vue-drag :moveZIndex="100">
cell
Type: String
Required: false
Default: cell
设置拖放元素的className和ref,按拖放元素顺序为cell-0 cell-1...
,通过此可在父组件获取拖放元素进行动画等处理
<vue-drag :cell="cell">
mutiTouch
Type: Boolean
Required: false
Default: false
多个拖放元素是否可以同时拖放
<vue-drag :mutiTouch="false">
limited
Type: Boolean
Required: false
Default: false
拖放元素是否受到父元素位置限制
<vue-drag :limited="false">
Events
start
Required: false
Parameters:
e
Event
<vue-drag @start="onStart">
move
Required: false
Parameters:
e
Eventposition
元素、触点位置:position.top
元素y轴方向位置position.left
元素x轴方向位置position.x
触点x轴方向位置position.y
触点x轴方向位置
<vue-drag @move="onMove">
end
Required: false
Parameters:
e
Eventposition
元素、触点位置:position.top
元素y轴方向位置position.left
元素x轴方向位置position.x
触点x轴方向位置position.y
触点x轴方向位置
animation
回调动画,传入移动元素、移动位置、过渡动画e
移动元素position
移动位置- Default:
{top: "0px", left: "0px"}
- Default:
transition
过渡动画- Default:
{duration: 500, easing: "ease-in-out"}
- Default:
<vue-drag @end="onEnd">