z-drag

基于 vue 开发的拖拽组件

安装

npm install --save z-drag

引入

• 全局引入

import ZDrag from 'z-drag'
Vue.use(ZDrag)
...
<z-drag v-model="list"></z-drag>

• 局部引入

import { ZDrag } from 'z-drag'
...
components: {
  ZDrag
}
...
<z-drag v-model="list"></z-drag>

配置项

属性

| 属性 | 描述 | 类型 | 默认值 | | :-----------: | :---------------------------------------------------------------------------------: | :------------: | :-----------------------: | | sortId | 每个元素的唯一标识 | String（必传） | - | | isSort | 是否拖拽排序，true-被拖拽元素插入到目标元素位置，false-被拖拽元素与目标元素位置互换 | Boolean | true | | immediate | 拖拽是否立即改变排序 | Boolean | true | | itemClass | 每个元素类样式 | String | 'z-drag-item' | | itemStyle | 每个元素内敛样式 | Object | {} | | ghostClass | 被拖拽元素类样式 | String | 'z-drag-item__ghost' | | ghostStyle | 被拖拽元素内敛样式 | Object | {} | | dragOverClass | 拖拽到元素上方的元素样式 | String | 'z-drag-item__over' | | disabledClass | 禁止被拖动元素的样式 | String | 'z-drag-item__disabled' |

事件

| 事件 | 描述 | 返回参数 | | :----: | :----------------------------------------------------------------------------: | :--------------: | | change | 列表排序发生变化时触发，说明：元素正在拖动中是不会触发该事件，只用释放才会触发 | 重排后的数据列表 |

举例

是否立即变化

immediate

• true：立即变化
• false：释放才变化

• 效果图
  immediate:true
  

  immediate:false
  

• 示例代码

<z-drag
  class="drag-container"
  v-model="list"
  :immediate="true"
  sortId="id"
  itemClass="drag-item-class"
>
  <div slot-scope="scope">
    {{ scope.data.label }}
  </div>
</z-drag>
...

是否拖拽排序

isSort

• true：排序
• false：位置互换

• 效果图
  isSort:true
  

  isSort:false
  

• 示例代码

<z-drag
  class="drag-container"
  v-model="list"
  :isSort="true"
  sortId="id"
  itemClass="drag-item-class"
>
  <div slot-scope="scope">
    {{ scope.data.label }}
  </div>
</z-drag>
...

指定元素不可拖拽

• 效果图

• 示例代码

...
<z-drag
  class="drag-container"
  v-model="list"
  :isSort="true"
  sortId="id"
  itemClass="drag-item-class"
>
  <div slot-scope="scope">
    {{ scope.data.label }}
  </div>
</z-drag>
...
data () {
  return {
    list: [
      ...
      {
        id: 3,
        label: '选项3',
        disabled: true // 选项3设置为不可拖拽
      },
      ...
    ]
  }
}
...