淘宝购物车拖拽功能的思考与实践

原创

于 2025-08-18 17:25:16 发布 · 1.3k 阅读

13 ·

CC 4.0 BY-SA版权

本文深入剖析了购物车拖拽功能的技术实现路径，在复杂业务场景下通过精细化控制、合理架构分工与细节体验打磨，实现了高效、稳定、流畅的用户交互体验。

功能演示

拖拽演示
Weex demo	购物车场景

为什么需要拖拽？

▐ 2.1 购物车功能 & 分组与拖拽的关系

购物车作为用户准备购买的商品集合，承担着展示+管理的功能。

上述管理操作都是针对单一商品，为了丰富对于所有购物车商品的管理形式，在 iCart 版本新增了和店铺并列的分组概念。允许用户把不同店铺内的不同商品放置在同一个区块内，提升勾选、凑单、结算的效率。

视图

▐ 2.2 拖拽的用途 & 拖拽规则

拖拽是针对用户购物车默认结构的一种调整，支持用户自动商品和区块组合起来。当然这种组合也不是完全的任意组合，也是有一些规则限制的。

简单罗列一下大致有这些规则：商品支持移入、移出自身店铺及任意分组；分组、店铺仅支持前后排序。一个商品特例是搭配购，搭配品必须一起移动，中间不能有任何品。

同一店铺内商品间可以随意排序，
同一分组内的商品可以随意排序，
店铺里的商品可以放进任何一个分组，
凑单条必须紧跟着店铺头
······

iCart 通过定义这样数据类型，用来表述用户的一次拖拽行为

{  type: reorderGroup|reorderInGroup|joinIntoGroup|removeFromGroup   // 当前操作的类型  fromBundleId:  XXXXXXX                                            // 来自哪个分组/店铺  toBundleId:    XXXXXXX                                            // 去往哪个分组/店铺  from:          XXXXXXX                                            // 操作品的cartId  to:            XXXXXXX                                            // 松手处上方的cartId}

▐ 2.3 拖拽功能的现实映射（为了更好的理解拖拽规则）

规则描述起来较为抽象，为了更好理解店铺、分组、商品之间的关系，理解拖拽中一些限制的原因，可以使用以下场景来映射一下购物车列表。以车厢、乘客为例，定义一些概念。