'jQuery UI Draggable' 防止点击可拖动容器内的元素

Question

I'm building a menu that's draggable horizontally:

The code is pretty straightforward, and the dragging works fine:

$draggable.draggable({
   axis: "x",
   distance: 30,
   delay: 40,
   scroll: false
});

Here's the issue at a high level:

• With jQuery Draggable:

  

  Every time you see the mouse go from one button to the other, you can assume that I'm clicking. And as you can see, there are some clicks that are ignored/missed (the click callback is not called at all).

• Without jQuery Draggable

  

  You can see that no clicks are missed (and for some reason, there's this browser blue overlay that doesnt appear when jquery draggable is on, that might be part of the issue)

---

I tried to play with the distance and delay options of jQuery draggable but it doesn't seem to affect the issue in any way.

I also have a secondary issue that's probably related. On Android 9, on Chrome, you can barely click on the buttons at all. It works when you click on the "padding" part, but not on the text itself, which is REALLY weird to me. On iOS tho, it works fine.

---

Here's the mark-up in case it helps:

---

Do you have any idea on why jQuery Draggable breaks the clicks on desktop and/or mobile?

Answer 1

With 1.12, I can click and I can drag without distance . See the following.

 $(function() { $("#pills-container.draggable").draggable({ axis: "x", scroll: false, containment: [ 0 - ($(window).width() / 2), 0, $(window).width() + ($(window).width() / 2), 0 ] }); $("#pills-container.filter-pill").click(function() { $(this).toggleClass("ui-state-highlight"); }); });

 .draggable-container { width: 100%; padding: 0.4em; overflow: none; }.draggable-container.filter-pill { display: inline-block; padding: 0.5em 1em; border-width: 2px; border-color: transparent; border-radius: 20px; }.draggable-container.filter-pill.ui-state-highlight { border-width: 2px; }

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div> <div id="pills-container" class="ui-widget"> <div class="draggable-container ui-widget-header"> <div class="draggable"> <div class="filter-pill mr-4 ui-widget-content">Location</div> <div class="filter-pill mr-4 ui-widget-content">Length</div> <div class="filter-pill mr-4 ui-widget-content">Interests</div> <div class="filter-pill mr-4 ui-widget-content">More</div> </div> </div> </div> </div>

I am testing with FireFox 84 (64-bit Linux). If I drag a pill, it does catch the click too.