SortableJS 实现拖拽替换而非新增列的交互方案

在开发类似游戏物品栏的拖拽交互界面时，我们经常会遇到需要限制物品栏位数量并实现类型匹配的需求。本文将以SortableJS为基础，探讨如何实现拖拽替换而非新增列的交互方案。

核心需求分析

典型的物品栏系统通常具有以下特点：

1. 左右两侧分别放置不同类型的物品
2. 左侧物品可以拖拽到右侧指定类型的栏位
3. 栏位数量固定，不允许无限扩展
4. 需要实现拖拽时的类型匹配验证

SortableJS的默认行为

SortableJS默认的拖拽行为会在目标容器中新增一个元素，这会导致：

• 栏位数量超出限制
• 无法实现严格的类型匹配
• 不符合游戏物品栏的交互习惯

解决方案：Swap插件

SortableJS的Swap插件提供了元素交换的能力，完美解决了这个问题。该插件的工作原理是：

1. 当拖拽元素悬停在目标元素上时
2. 自动交换两个元素的位置
3. 保持容器内元素总数不变
4. 支持自定义交换条件

实现步骤

1. 初始化Sortable实例

import Sortable from 'sortablejs';
import Swap from 'sortablejs-plugin-swap';

// 左侧物品容器
const leftContainer = new Sortable(document.getElementById('left'), {
    group: {
        name: 'inventory',
        pull: 'clone',
        put: false
    },
    sort: false,
    swap: true
});

// 右侧栏位容器
const rightContainer = new Sortable(document.getElementById('right'), {
    group: {
        name: 'inventory',
        put: function(to, from) {
            // 类型匹配验证逻辑
            return to.el.dataset.type === from.el.dataset.type;
        }
    },
    swap: true,
    swapClass: 'highlight',
    animation: 150
});

2. 类型匹配验证

通过group.put选项可以实现拖拽时的类型验证：

put: function(to, from) {
    // 获取拖拽元素和目标栏位的类型
    const draggedType = from.el.dataset.itemType;
    const slotType = to.el.dataset.slotType;
    
    // 仅当类型匹配时允许放置
    return draggedType === slotType;
}

3. 视觉反馈优化

Swap插件提供了swapClass选项，可以在交换时添加高亮样式：

.highlight {
    background-color: rgba(255, 255, 0, 0.3);
    transition: background-color 0.3s ease;
}

进阶优化

1. 自定义交换逻辑

通过swapThreshold选项可以调整触发交换的敏感度：

swapThreshold: 0.5, // 默认0.5，表示元素重叠50%时触发交换

2. 动态禁用交换

在某些场景下可能需要临时禁用交换功能：

// 禁用交换
rightContainer.option('swap', false);

// 启用交换
rightContainer.option('swap', true);

3. 交换事件处理

Swap插件提供了专门的交换事件：

rightContainer.on('swap', function(evt) {
    console.log('交换完成', evt.dragEl, evt.target);
});

注意事项

1. 确保Swap插件已正确引入
2. 交换操作会触发Sortable的onChange事件
3. 在移动端设备上可能需要调整swapThreshold值
4. 复杂的验证逻辑可能会影响性能

通过上述方案，我们可以实现一个符合游戏物品栏交互习惯的拖拽系统，既保持了栏位数量固定，又实现了类型匹配验证，为用户提供了流畅自然的交互体验。