vue2-drag
Vue component for drag and drop
Demo
Install
yarn add vue2-drag
Usage
Vue
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
cell
Type: String
Required: false
Default: cell
设置拖放元素的className和ref,按拖放元素顺序为cell-0 cell-1...
,通过此可在父组件获取拖放元素进行动画等处理
mutiTouch
Type: Boolean
Required: false
Default: false
多个拖放元素是否可以同时拖放
limited
Type: Boolean
Required: false
Default: false
拖放元素是否受到父元素位置限制
Events
start
Required: false
Parameters:
e
Event
move
Required: false
Parameters:
e
Eventposition
元素、触点位置:position.top
元素y轴方向位置position.left
元素x轴方向位置position.x
触点x轴方向位置position.y
触点x轴方向位置
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: