React - Embla Carousel 中的可拖动容器（颜色选择器）未按预期工作

Question

如果之前曾问过类似的问题，我们深表歉意。

我的问题是，当使用 Embla Carousel 并实现颜色选择器（单独或包装在 div 中）时，拖动颜色选择器无法按预期工作，因为它也会拖动旋转木马。

我实现了一个简单的代码沙箱供大家参考。

最小化复制

在我自己的代码中，我尝试将

<ChromePicker />

包装在 div 中（在 div 上应用了填充）。并实现 onPointerDown、onPointerMove 和 onPointerUp 来 stopPropagation 和 PreventDefault。

所以这仅适用于 div，如果我尝试在 div 内部（在填充区域上）拖动，它不会拖动轮播。但拖动

<ChromePicker />

仍然会使轮播移动。

Answer 1

您可以利用

EmblaCarousel

提供的以下配置选项，并在拖动目标是容器 div 时启用拖动（返回 true），否则禁用拖动（颜色选择器内的任何位置）。

const OPTIONS: EmblaOptionsType = {
  watchDrag: (_, event) => {
    if (event.target.classList.contains('embla__slide__number')) {
      return true
    }
    return false
  }
}