HTML5 Drag and Drop跨DIV单次图片交换限制实现思路咨询

初始DOM结构参考 #

DIV1
-- IMG 1
-- IMG 2
DIV2
-- IMG 3
-- IMG 4

前置状态准备 #

在你已掌握的HTML5 Drag and Drop基础逻辑上，只需要新增几个固定状态做规则校验即可，不需要改动基础拖拽流程：

• 初始化阶段给所有IMG元素绑定不可变的原始容器标识：比如给IMG1、IMG2加data-origin-container="div1"属性，IMG3、IMG4加data-origin-container="div2"属性，这个属性后续无论元素被拖拽到哪个容器都不修改
• 定义三个全局状态变量：
  • currentDragEl：初始值null，存储当前正在被拖拽的IMG元素引用
  • activeSwapPair：初始值null，存储当前已完成交换的图片配对信息，格式参考{ el1: 元素1引用, el2: 元素2引用 }

规则1校验逻辑（禁止同容器内交换） #

• 绑定dragstart事件：触发时把当前拖拽的IMG元素赋值给currentDragEl
• 给dragover和drop事件加前置拦截逻辑：拿到当前放置目标所属的容器ID，和currentDragEl上的data-origin-container值做比对，如果两个值一致，直接调用event.preventDefault()拦截拖拽，不执行后续交换逻辑

规则2校验逻辑（同一时间仅允许一组跨容器交换） #

所有drop事件触发交换逻辑前，先做两层判断：

1. 当activeSwapPair为null（当前无生效的交换配对）：仅当校验通过「跨原始容器」的规则1要求时，才允许执行交换，交换完成后把本次交换的两个IMG元素引用存入activeSwapPair
2. 当activeSwapPair不为null（当前已有生效的交换配对）：校验当前拖拽的currentDragEl和放置目标的IMG元素，是否正好和activeSwapPair里存储的两个元素完全匹配——如果匹配，允许执行交换，交换完成后把activeSwapPair重置为null（回到初始可交换状态）；如果不匹配，直接拦截drop行为，不执行任何交换操作

内容的提问来源于stack exchange，提问作者MW_DEVEL