0.4.1 • Published 1 year ago
介绍
- 轻量级的 vue 拖拽组件，可通过容器限制拖拽范围。
- 包含两个组件：DragDropContainer 容器组件，DragDrop 拖拽组件。
- 可搭配使用，也可分开使用。
DragDropContainer 组件属性
| 属性名 | 类型 | 说明 |
|---|
| id | String | 唯一标识 |
| width | Number | 容器宽度 |
| height | Number | 容器高度 |
DragDropContainer 组件方法
| 属性名 | 参数 | 说明 |
|---|
| obtainChildren | | 动态添加子组件时调用此方法以更新子组件持有 |
DragDrop 组件属性
| 属性名 | 类型 | 说明 |
|---|
| id | String | 唯一标识 |
| collision | Boolean | 是否碰撞，默认为 true。 |
| locking | Boolean | 是否可以移动，默认为 true |
| lockingX | Boolean | 锁定 X 轴，默认为 false |
| lockingY | Boolean | 锁定 Y 轴，默认为 false |
| initialTop | Number | 初始距离容器 top |
| initialLeft | Number | 初始距离容器 left |
DragDrop 组件事件
| 属性名 | 参数 | 说明 |
|---|
| change | none | {id|String,left|Number,top|Number}。组件拖拽停止事件 |
| move | none | {id|String,left|Number,top|Number}。组件拖拽移动事件 |
| collision | none | {targetId|String,isContainer|Boolen,left|Number,top|Number}。组件碰撞到其他组件事件 |
使用说明
<DragDropContainer
id="conta"
:width="300"
:height="300"
style="border: 1px solid; box-sizing: border-box; margin-left: 100px; margin-top: 100px"
>
<DragDrop id="789" @change="dragDropChange" lockingX collision>
<div style="width: 100px; height: 100px; background-color: bisque">
<div>锁定X轴(789)</div>
</div>
</DragDrop>
<DragDrop id="mmm" :initialTop="0" :initialLeft="100" collision>
<div style="width: 100px; height: 100px; background-color: bisque">
<div>mmm</div>
</div>
</DragDrop>
<DragDrop id="sss" :initialTop="0" :initialLeft="200" collision>
<div style="width: 100px; height: 100px; background-color: bisque">
<div>sss</div>
</div>
</DragDrop>
<DragDrop id="ddd" :initialTop="100" :initialLeft="0" collision>
<div style="width: 100px; height: 100px; background-color: bisque">
<div>ddd</div>
</div>
</DragDrop>
<DragDrop id="jjj" :initialTop="200" :initialLeft="0" collision>
<div style="width: 100px; height: 100px; background-color: bisque">
<div>jjj</div>
</div>
</DragDrop>
<DragDrop
id="xxx"
@change="dragDropChange"
:initialTop="100"
:initialLeft="100"
lockingY
collision
>
<div style="width: 100px; height: 100px; background-color: bisque">
<div>锁定Y轴(xxx)</div>
</div>
</DragDrop>
<DragDrop
id="234"
@change="dragDropChange"
@move="dragDropMove"
:initialLeft="200"
:initialTop="200"
collision
>
<div style="width: 100px; height: 100px; background-color: aquamarine">联动主体(234)</div>
</DragDrop>
</DragDropContainer>
<DragDrop
id="122"
@change="dragDropChange"
:initialLeft="initialLeft"
:initialTop="initialTop"
:locking="false"
>
<div style="width: 100px; height: 100px; background-color: aquamarine">联动客体(122)</div>
</DragDrop>