vue-drag-group v0.1.0

vue-drag-group

基于Vue2的拖拽分组插件，适合用于在pc端实现类似手机桌面app管理的效果

效果

• 任意拖拽：在限制宽高的范围内任意拖拽
• 拖动分组：当拖动到另一个元素上时松开则会成为一个组
• 边缘检测：当拖动到范围外时则停靠在边界位置

安装

npm i vue-drag-group --save

使用

<vue-drag-group ref="dragGroup" :list="list" direction="vertical" :gap="10" :w="1000" :h="1000"
    :classArr="['drag-group']"
    @updateList="updateList"
   >
   </vue-drag-group>

参数

list格式如下

list: [
        {
          "group": false,
          children: null,
          "group_name": null,
          "app": {
            id: 1,
            name:'视频',
            icon: require('@/assets/video.webp')
          },
          "group_id": 1,
          "top": 0,
          "left": 0
        },
        {
          "group": false,
          "children": null,
          "group_name": null,
          "app": {
            "id": 2,
            "name": "相册",
            "icon": null,
          },
          "group_id": null,
          "top": 0,
          "left": 0
        }
  ]

事件

• @updateList:内部元素调整时list会更新，通过此方法更新父组件中的list
• @clickItem：点击内部元素触发事件