移动端用点击-触达替代jQuery UI Drag and Drop的可行性问询

当然可以！这种「先选中高亮，再点击目标完成操作」的模式完全适配移动端，完美解决小屏设备上拖放容易误触滚动的痛点，还能保留核心功能的可用性。下面给你一套落地的实现思路和代码示例：

第一步：实现选中高亮逻辑 #

给可拖拽元素绑定点击事件，切换选中状态（通过添加selected类实现高亮），同时处理已选中元素的取消逻辑：

// 假设你的可拖拽元素类名为.draggable-item
$('.draggable-item').on('click', function() {
    // 先取消其他已选中元素的状态
    $('.draggable-item.selected').removeClass('selected');
    // 切换当前元素的选中状态
    $(this).toggleClass('selected');
});

配合CSS实现直观的高亮视觉反馈：

.draggable-item.selected {
    background-color: #e3f2fd;
    border: 2px solid #2196f3;
    box-shadow: 0 0 6px rgba(33, 150, 243, 0.5);
    /* 可以根据需求添加过渡动画 */
    transition: all 0.2s ease;
}

第二步：绑定目标区域的点击完成操作 #

给拖放目标区域绑定点击事件，当存在选中元素时，执行原拖放逻辑（比如移动元素、更新数据等），最后清除选中状态：

// 假设你的拖放目标区域类名为.drop-target
$('.drop-target').on('click', function() {
    const selectedItem = $('.draggable-item.selected');
    if (!selectedItem.length) return; // 没有选中元素则不执行操作

    // 这里替换成你原拖放完成后的业务逻辑，比如将元素移动到目标区域
    $(this).append(selectedItem);
    
    // 清除选中状态
    selectedItem.removeClass('selected');

    // 如果需要兼容原jQuery UI的drop事件逻辑，可以手动触发
    // selectedItem.trigger('drop', { target: this });
});

第三步：禁用移动端的原生拖放（可选） #

为了避免原jQuery UI拖放在移动端的干扰，可针对移动设备禁用拖放功能：

// 简单检测移动设备
const isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (isMobileDevice) {
    $('.draggable-item').draggable('disable');
}

额外优化建议 #

• 可以给选中元素添加点击外部区域取消选中的逻辑，提升用户体验：

  $(document).on('click', function(e) {
      if (!$(e.target).closest('.draggable-item').length) {
          $('.draggable-item.selected').removeClass('selected');
      }
  });
  

• 给目标区域添加触摸反馈，比如点击时的背景变化，让用户明确知道这是可交互的目标。

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