如何使 div 在可拖动的 div 中不可拖动？ [复制]

Question

所以，我有一个叫做 Owl-Carousel 的滑动插件。

它会自动滑动，但您也可以通过拖动幻灯片手动滑动它。

所以我需要在幻灯片中放置一些 div；如果从该 div 开始拖动，则无法拖动幻灯片。它会随其余部分一起滚动，但它是一个可点击的 div，所以我不希望人们试图点击它并毫无意义地滚动它。

这是一个小例子：

<div class="owl-carousel">
    <figure>
        <div class="foo">Content...</div>
        <img src="blablabla.jpg">
    </figure>
</div>

所以，我希望 foo div 与其余部分一起滚动，我只是不想通过单击并拖动来滚动轮播，但我仍然希望能够通过单击其他任何地方来滚动并拖动。

有解决办法吗？

在 css 中有pointer-events: none，但 div 需要是可点击的。

它可以是 HTML、CSS、JavaScript（jQuery 或“vanilla”），也可以是 Owl-Carousel 中的某个选项。

Answer 1

有人遇到过类似的问题：

disable dragging in specific element (Item) in “Owl carousel” - jquery

也许这会有所帮助。