javascript - 可拖动父级但保持子级可滚动

Question

在父div上调用draggable时，我无法再在移动设备上滚动子div。当触摸子 div 时，我希望滚动该 div，但让父级保持不被拖动。

$(function() {
  $('.table').draggable()
});

.table
{
 width:200px;
 height:200px;
 border: 1px solid black;
 border-radius: 15px;
 overflow:hidden;
}
.table-lower
{
  overflow-y:auto;
  height: 100%;
}

<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>
<div class="table">
<p>TABLE NAME</p>
<div class="table-lower">
<p>This is the part that I want scrollable on mobile; dont' trigger draggable here on touch</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt iaculis aliquam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec scelerisque imperdiet ullamcorper. Etiam sit amet ornare leo, malesuada elementum nibh. Nulla in malesuada est, nec accumsan lorem. Vivamus eget sodales sapien. Donec non nibh nisl. Aenean vitae ipsum eu tortor ultrices vulputate. Suspendisse commodo pretium metus, non lacinia metus ultricies at. Duis ut euismod tortor, in feugiat metus. Nullam condimentum nisl nisi, sit amet dictum metus mollis quis. Phasellus et lectus a lacus ornare convallis.</p>
</div>
</div>

Answer 1

您可以为标题 p 元素分配一个类，并使用它的 handle 。这将确保拖动可以从 title 元素发生，而不是从 .table 元素的每个子元素发生。

工作演示:

$(function() {
  $('.table').draggable({
    handle: 'p.handle'
  })
});

.table {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  border-radius: 15px;
  overflow: hidden;
}

.table-lower {
  overflow-y: auto;
  height: 100%;
}

<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>
<div class="table">
  <p class="handle">TABLE NAME</p>
  <div class="table-lower">
    <p>This is the part that I want scrollable on mobile; dont' trigger draggable here on touch</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt iaculis aliquam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec scelerisque imperdiet ullamcorper. Etiam sit amet ornare leo, malesuada
      elementum nibh. Nulla in malesuada est, nec accumsan lorem. Vivamus eget sodales sapien. Donec non nibh nisl. Aenean vitae ipsum eu tortor ultrices vulputate. Suspendisse commodo pretium metus, non lacinia metus ultricies at. Duis ut euismod tortor,
      in feugiat metus. Nullam condimentum nisl nisi, sit amet dictum metus mollis quis. Phasellus et lectus a lacus ornare convallis.</p>
  </div>
</div>