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。这将确保drags可以从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>

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

1 个答案: