使用jQuery的hasClass与addClass实现iPad端touchend事件类添加问题排查

问题根源 #

原代码存在三个核心问题：

1. 选择器逻辑完全错误：$(".year").hasClass("year2")是检查页面上所有.year元素里是否存在带year2类的元素——而页面本来就有这个元素，所以第一个if永远为真，只会给year2加类，完全和拖拽动作无关。
2. 事件绑定对象错误：把touchend绑定在父容器.draggable上，而实际拖拽的是.draggable-ball，导致无法正确获取拖拽元素的位置。
3. 触摸适配缺失：jQuery UI Draggable原生不支持触摸设备，直接在iPad上用会失效，需要额外处理。

修正后的代码方案 #

步骤1：补全依赖（使用jQuery UI Draggable时）

在HTML里引入jQuery UI和触摸适配插件（touch-punch），放在jQuery之后：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

（注：若无法使用外链，可下载文件本地引入）

步骤2：修正JS逻辑

// 初始化拖拽组件，限制在拖拽区域内
$('.draggable-ball').draggable({
  containment: '.drag-area'
});

// 给拖拽元素绑定touchend事件，判断落点
$('.draggable-ball').on('touchend', function(e) {
  e.preventDefault();
  const $dragItem = $(this);
  // 获取拖拽元素的位置与尺寸
  const dragPos = $dragItem.offset();
  const dragW = $dragItem.width();
  const dragH = $dragItem.height();

  // 遍历所有.year容器，检测碰撞（判断拖拽元素是否落在当前容器上）
  $('.year').each(function() {
    const $target = $(this);
    const targetPos = $target.offset();
    const targetW = $target.width();
    const targetH = $target.height();

    // 简单碰撞检测逻辑：两个元素不重叠的四种情况取反
    const isOverlap = !(
      dragPos.top + dragH < targetPos.top ||
      dragPos.top > targetPos.top + targetH ||
      dragPos.left + dragW < targetPos.left ||
      dragPos.left > targetPos.left + targetW
    );

    if (isOverlap) {
      // 只给year2或year58添加drop类
      if ($target.hasClass('year2') || $target.hasClass('year58')) {
        $target.addClass('drop');
      }
      // 找到匹配容器后停止遍历
      return false;
    }
  });
});

关键改进点 #

• 把事件绑定到实际拖拽的.draggable-ball上，确保能获取到拖拽元素的位置信息
• 用碰撞检测判断拖拽元素落在哪个.year容器上，逻辑符合需求
• 引入touch-punch解决jQuery UI Draggable在iPad上的触摸支持问题
• 去掉了原代码中逻辑错误的if-else分支，改为精准判断目标容器的类名

内容的提问来源于stack exchange，提问作者n.goat_