介绍

• 轻量级的 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>