限制多列表拖拽方向需明确拖拽发生位置与允许移动方向，主流方案通过group+direction、handle限定触发区、touch-action禁用ios冲突手势及transform+pointer-events实现视觉级锁定。
限制多列表拖拽方向，关键在于明确「拖拽发生在哪里」和「允许往哪移动」两个层面。不是所有组件都支持细粒度方向控制，但主流方案（如 Vue.draggable.next、movable-area、原生 Sortable.js）都提供了可靠手段。
用 group + direction 控制跨列表拖拽流向
当多个列表属于同一 group 时，默认允许任意方向交换——但你可以通过组合配置实现方向约束：
- 给每个列表设置
direction="vertical"，禁止水平拖入/拖出（即不能从左列表横向拖进右列表） - 若需「只允许 A → B，禁止 B → A」，可为 B 列表单独设
:disabled="true"或监听move事件拦截反向操作 - 在
move钩子中判断evt.relatedContext.list !== evt.draggedContext.list，再检查来源/目标列表 ID，返回false拒绝非法流向
用 handle + CSS 限定拖拽触发区域
方向限制不仅是“能不能放”，更是“从哪里开始拖”。加手柄能避免误触，也便于统一控制：
- 为每项添加固定位置的手柄元素（如
<div class="drag-handle">⋮</div>） - 在 draggable 组件中设置
handle=".drag-handle"，拖拽仅响应手柄区域的 touch/mouse 事件 - 配合
direction="vertical"，即使手柄存在，也无法水平拖动整行
移动端 iOS/Android 的特殊处理
iOS Webview 默认启用「左右滑动翻页」手势，会与水平拖拽冲突，导致拖拽失灵或页面滚动：
- 全局禁用：在
加样式touch-action: pan-y;，允许垂直滚动但禁止水平拖拽干扰 - 局部禁用：对 movable-area 容器设
style="touch-action: none;"，再由内部 movable-view 自行处理 x/y 移动 - uni-app 中，
movable-area的direction属性必须显式设为"vertical"或"horizontal"，设"all"在 iOS 上易失效
用 CSS transform + pointer-events 做视觉级锁定
某些场景下需保留拖拽 UI 但禁用特定方向行为（比如显示拖拽手柄但禁止上下移动）：
- 对 movable-view 设置
:style="{ transform: `translateY(${y}px)` }"并绑定 y 值，同时设y="0"锁死垂直位移 - 在 touchmove 中手动计算偏移，只更新 x 或只更新 y，另一维始终截断为初始值
- 隐藏某方向手柄：用
v-if="isHorizontalMode"动态渲染对应方向的手柄节点
