父級可拖動但子級可滾動

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

您可以將一個類分配給title 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>