如何为可放置（droppable）元素使用accept函数匹配多种特定元素？

你找的方向完全没错！用accept函数来控制拖拽元素的可放置范围就是最适合的方案，咱们把逻辑理清楚就能搞定了。

先明确规则 #

根据你的需求，核心匹配逻辑应该是：

• 带bottom标识的拖拽元素，只能放入带up标识的放置区域
• 带up标识的拖拽元素，只能放入带bottom标识的放置区域
• 同类元素（比如都是bottom）不能互相放置

修正并完善后的代码 #

首先你的HTML结构保持不变：

<img data-hand="hand-bottom-left" src="images/bottom-left-close.jpg">
<img data-hand="hand-bottom-left" src="images/bottom-left-close.jpg">
<br>
<img data-hand="hand-up-left-close" src="images/up-left-close.jpg">
<img data-hand="hand-up-left-close" src="images/up-left-close.jpg">

然后是JavaScript部分，先修正语法错误，再实现匹配逻辑：

// 初始化所有带data-hand的元素为可拖拽，未被接受时返回原位
$("[data-hand*='hand']").draggable({ 
  revert: function(droppable) {
    // 只有当未被放置区域接受时，才返回原位
    return !droppable;
  }
});

// 初始化所有带data-hand的元素为可放置区域
$("[data-hand*='hand']").droppable({ 
  accept: function(draggableEl) {
    // 获取拖拽元素的标识类型
    const dragType = $(draggableEl).data('hand');
    // 获取当前放置区域的标识类型
    const dropType = $(this).data('hand');

    // 判断是否符合跨类别放置的规则
    const dragIsBottom = dragType.includes('bottom');
    const dropIsUp = dropType.includes('up');
    const dragIsUp = dragType.includes('up');
    const dropIsBottom = dropType.includes('bottom');

    return (dragIsBottom && dropIsUp) || (dragIsUp && dropIsBottom);
  },
  drop: function(event, ui) {
    // 这里可以添加放置成功后的逻辑，比如交换元素位置、添加样式等
    console.log('放置成功！');
  }
});

关键细节说明 #

1. accept函数的参数draggableEl就是当前正在被拖拽的元素，通过它可以拿到拖拽元素的data-hand属性
2. $(this)代表当前的放置区域元素，能直接获取它的标识类型
3. 用.data('hand')代替.attr('data-hand')是jQuery的最佳实践，它会自动处理data属性的读取，更高效
4. 调整了draggable的revert配置，让元素只有在未被接受时才返回原位，放置成功后就不会弹回去了

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