0.1.0 • Published 3 years ago

vue-drag-group v0.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

vue-drag-group

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

效果

2022-06-14_2281841392291411365.44.22

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

安装

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>

参数

参数(param)类型(type)实例(example)
listArray
directionString'horizon' || 'vertical'
gapNumber10
w (means width)Number1000
h (means height)Number1000

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:点击内部元素触发事件