更新记录

1.0.1（2025-09-26）

• 添加拖拽开始事件拦截功能
• 添加item-click事件处理
• 为默认网格项添加删除按钮样式配置

1.0.0（2025-09-26）

v1.0.0

• 初始版本发布

平台兼容性

uni-app(4.66)

liaction-grid-drag

基于Vue 3的可拖拽网格组件，提供灵活的拖拽排序、项目管理功能，适用于UniApp项目。

特性

• 支持两种拖拽模式：移位(shift)和交换(swap)
• 可自定义网格布局（列数、间距、内边距等）
• 支持固定项目（不可拖拽）
• 内置删除功能，支持确认对话框
• 支持添加项目功能
• 丰富的样式自定义选项
• 响应式设计，自适应窗口大小
• 提供完整的事件回调机制
• 支持项目级别的样式覆盖

基本用法

<template>
  <view class="container">
    <liaction-grid-drag
      :items="gridItems"
      :columns="3"
      :draggable="true"
      :drag-mode="'shift'"
      :show-delete-button="true"
      :show-add-slot="true"
      :useCustomDeleteModal="useCustomDeleteModal"
      @sortEnd="onSortEnd"
      @add-item="onAddItem"
      @delete-item="onDeleteItem"
      @item-click="onItemClick"
      @show-delete-modal="onShowDeleteModal"
    >
      <template #item="{ item, index }">
        <view style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
          <image :src="item.icon" mode="aspectFit" style="width: 50%; height: 50%;" />
          <text>{{ item.name }}</text>
        </view>
      </template>
    </liaction-grid-drag>
  </view>
</template>

<script>
export default {
  data() {
    return {
      gridItems: [
        { id: '1', name: '项目1', icon: '/static/icons/1.png' },
        { id: '2', name: '项目2', icon: '/static/icons/2.png' },
        { id: '3', name: '项目3', icon: '/static/icons/3.png' },
        { id: '4', name: '项目4', icon: '/static/icons/4.png' },
        { id: '5', name: '项目5', icon: '/static/icons/5.png' }
      ],
      useCustomDeleteModal: false
    }
  },
  methods: {
    onSortEnd(items) {
      this.gridItems = items;
      console.log('排序结果:', items);
    },
    onAddItem() {
      const newItem = {
        id: Date.now().toString(),
        name: `新项目${this.gridItems.length + 1}`,
        icon: `/static/icons/${Math.floor(Math.random() * 9) + 1}.png`
      };
      this.gridItems.push(newItem);
    },
    onDeleteItem({ item, index }) {
      this.gridItems.splice(index, 1);
    },
    onItemClick({ item, index }) {
      console.log('点击了项目:', item, '索引:', index);
    },
    onShowDeleteModal({ item, index, confirm, cancel }) {
      // 显示自定义删除确认弹窗
      // 用户确认后调用 confirm()
      // 用户取消后调用 cancel()
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}
</style>

Props

样式相关属性

删除按钮相关属性

删除确认对话框属性

滚动条相关属性

Item 数据结构

每个网格项目可以包含以下属性：

事件

插槽

部分示例

基本用法

<liaction-grid-drag
    :useDefaultItems="true"
/>

固定项目示例

<template>
  <liaction-grid-drag
    :items="gridItems"
    :columns="4"
    :draggable="true"
    :show-delete-button="true"
  />
</template>

<script>
export default {
  data() {
    return {
      gridItems: [
        { id: '1', name: '可拖拽项目', draggable: true },
        { id: '2', name: '固定项目', fixed: true }, // 通过fixed属性固定项目
        { id: '3', name: '可拖拽项目2', draggable: true },
        { id: '4', name: '不可删除', deletable: false }
      ]
    }
  }
}
</script>

自定义项目样式

<template>
    <liaction-grid-drag :items="gridItems" :columns="3" :gap="15" itemBgColor="#67c23a" itemTextColor="#fff"
        itemBorderRadius="12">
        <template #item="{ item, isDragging }">
            <view class="custom-item" :class="{ 'dragging': isDragging }">
                <image :src="item.image" mode="aspectFit" class="item-image" />
                <text class="item-title">{{ item.title }}</text>
                <text class="item-desc">{{ item.description }}</text>
            </view>
        </template>
    </liaction-grid-drag>
</template>

<script>
    export default {
        data() {
            return {
                gridItems: [
                    {
                        image: '/static/icons/1.png',
                        title: 'Item 1',
                        description: 'Description 1'
                    },
                    {
                        image: '/static/icons/2.png',
                        title: 'Item 2',
                        description: 'Description 2'
                    },
                    {
                        image: '/static/icons/3.png',
                        title: 'Item 3',
                        description: 'Description 3'
                    },
                    {
                        image: '/static/icons/4.png',
                        title: 'Item 4',
                        description: 'Description 4'
                    },
                    {
                        image: '/static/icons/5.png',
                        title: 'Item 5',
                        description: 'Description 5'
                    }
                ],
            }
        }
    }
</script>

<style scoped>
    .custom-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;
        box-sizing: border-box;
    }

    .item-image {
        width: 60px;
        height: 60px;
        margin-bottom: 8px;
    }

    .item-title {
        font-weight: bold;
        margin-bottom: 4px;
    }

    .item-desc {
        font-size: 12px;
        text-align: center;
    }

    .dragging {
        opacity: 0.8;
    }
</style>

常见问题与解决方案

问题：拖拽时项目位置不正确

解决方法：确保没有在样式中覆盖组件内部的定位样式，特别是movable-view元素的定位属性。

问题：固定项目被意外移动

解决方法：检查项目数据中fixed属性是否正确设置，确保固定项目的draggable属性为false。

问题：滚动条样式不符合预期

解决方法：通过自定义滚动条相关props来调整样式，或者在全局样式中定义相应的滚动条样式覆盖。

问题：在小屏幕设备上拖拽不流畅

解决方法：可以适当增加DRAG_THRESHOLD值来减少计算频率，或者减少同时显示的项目数量。

注意事项

1. 组件使用了Vue 3的Composition API，确保您的项目支持Vue 3
2. 组件依赖UniApp的movable-area和movable-view组件，确保在非UniApp环境中适当适配
3. 对于大量数据（如超过50项），可能需要优化性能或考虑虚拟列表
4. 拖拽操作可能在某些低性能设备上有延迟，建议根据实际场景调整参数
5. 在自定义样式时，避免直接修改组件内部的类名样式，建议使用插槽和自定义类
6. 当设置fixed: true属性时，组件会自动将该项的draggable属性设置为false
7. 自定义删除弹窗功能需要同时设置useCustomDeleteModal: true并监听show-delete-modal事件
8. 组件内部使用_uniqueKey作为项目的唯一标识，在事件回调中会自动过滤掉该属性