父级Div设置Draggable后移动端子Div无法滚动的解决方案咨询

我之前也碰到过这个坑，其实是jQuery UI的draggable默认会拦截父元素上的触摸事件，用来处理拖动逻辑，这就直接导致子元素的滚动事件被覆盖，在移动端没法正常滚动。这里有两个简单好用的解决办法，你可以按需选择：

方案一：用draggable的cancel选项 #

jQuery UI的draggable自带了cancel参数，专门用来指定哪些子元素不会触发父级的拖动行为。我们只需要把.table-lower设为这个参数的目标，这样触摸子元素时，父级的拖动就会被禁用，子元素就能正常滚动了。

修改后的JS代码如下：

$(function() { 
  $('.table').draggable({
    cancel: '.table-lower' // 指定子元素不触发父级拖动
  }); 
});

方案二：在子元素上阻止触摸事件冒泡 #

另一种思路是在子元素的触摸事件里，阻止事件向上冒泡到父级。这样父级的draggable就接收不到触摸信号，自然不会触发拖动，子元素的滚动就能正常工作。

添加这段JS代码即可：

$(function() { 
  $('.table').draggable();
  // 阻止子元素的触摸事件冒泡到父级
  $('.table-lower').on('touchstart touchmove', function(e) {
    e.stopPropagation();
  });
});

完整可运行示例 #

把HTML、CSS和JS整合起来的完整代码（别忘了引入jQuery UI，不然draggable没法生效）：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <style>
    .table { 
      width:200px; 
      height:200px; 
      border: 1px solid black; 
      border-radius: 15px; 
      overflow:hidden; 
    } 
    .table-lower { 
      overflow-y:auto; 
      height: 100%; 
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="table">
    <div class="table-lower">
      <!-- 加足够多内容测试滚动 -->
      测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>
      测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>
      测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>
    </div>
  </div>

  <script>
    // 二选一使用方案代码
    // 方案一
    $(function() { 
      $('.table').draggable({
        cancel: '.table-lower'
      }); 
    });

    // 方案二
    // $(function() { 
    //   $('.table').draggable();
    //   $('.table-lower').on('touchstart touchmove', function(e) {
    //     e.stopPropagation();
    //   });
    // });
  </script>
</body>
</html>

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