如何让基于Tailwind CSS和Alpine JS的轮播支持鼠标/触摸拖拽？

我使用Tailwind CSS和Alpine JS实现了一个轮播组件，现有功能符合预期，但希望添加鼠标拖拽滑动的功能。尝试引入其他带拖拽功能的Alpine脚本但没有效果，自身JavaScript基础较为薄弱。以下是修改后支持鼠标拖拽的完整代码：

<div class="mt-24">
    <script>
      window.carousel = function () {
        return {
          container: null,
          prev: null,
          next: null,
          // 拖拽相关状态
          isDragging: false,
          startX: 0,
          scrollStartX: 0,
          
          init() {
            this.container = this.$refs.container

            this.update();

            this.container.addEventListener('scroll', this.update.bind(this), {passive: true});
            
            // 绑定拖拽事件
            this.container.addEventListener('mousedown', this.handleMouseDown.bind(this));
            document.addEventListener('mousemove', this.handleMouseMove.bind(this));
            document.addEventListener('mouseup', this.handleMouseUp.bind(this));
            document.addEventListener('mouseleave', this.handleMouseUp.bind(this));
          },
          update() {
            const rect = this.container.getBoundingClientRect();

            const visibleElements = Array.from(this.container.children).filter((child) => {
              const childRect = child.getBoundingClientRect()

              return childRect.left >= rect.left && childRect.right <= rect.right;
            });

            if (visibleElements.length > 0) {
              this.prev = this.getPrevElement(visibleElements);
              this.next = this.getNextElement(visibleElements);
            }
          },
          getPrevElement(list) {
            const sibling = list[0].previousElementSibling;

            if (sibling instanceof HTMLElement) {
              return sibling;
            }

            return null;
          },
          getNextElement(list) {
            const sibling = list[list.length - 1].nextElementSibling;

            if (sibling instanceof HTMLElement) {
              return sibling;
            }

            return null;
          },
          scrollTo(element) {
            const current = this.container;

            if (!current || !element) return;

            const nextScrollPosition =
              element.offsetLeft +
              element.getBoundingClientRect().width / 2 -
              current.getBoundingClientRect().width / 2;

            current.scroll({
              left: nextScrollPosition,
              behavior: 'smooth',
            });
          },
          // 拖拽开始
          handleMouseDown(e) {
            this.isDragging = true;
            this.startX = e.pageX;
            this.scrollStartX = this.container.scrollLeft;
            // 禁用平滑滚动，拖拽时实时滚动
            this.container.style.scrollBehavior = 'auto';
            // 防止选中文字
            e.preventDefault();
          },
          // 拖拽中
          handleMouseMove(e) {
            if (!this.isDragging) return;
            const diffX = e.pageX - this.startX;
            this.container.scrollLeft = this.scrollStartX - diffX;
          },
          // 拖拽结束
          handleMouseUp() {
            this.isDragging = false;
            // 恢复平滑滚动
            this.container.style.scrollBehavior = 'smooth';
            // 触发update更新prev/next状态
            this.update();
          }
        };
      }
      
    </script>
    <style>
      .scroll-snap-x {
        scroll-snap-type: x mandatory;
      }

      .snap-center {
        scroll-snap-align: center;
      }

      .no-scrollbar::-webkit-scrollbar {
        display: none;
      }

      .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
    </style>
    <div class="flex mx-auto items-center">
      <div x-data="carousel()" x-init="init()" class="relative overflow-hidden group">
        <div x-ref="container"
             class="ml-4 flex overflow-x-scroll scroll-snap-x space-x-4 no-scrollbar cursor-grab active:cursor-grabbing">
          
          {% for origin in origins %}
          <div class="group/item relative ml-4 flex-auto flex-grow-0 flex-shrink-0 w-4/5 sm:w-4/5 xl:w-2/5 rounded-lg bg-gray-100 items-center justify-center snap-center overflow-hidden shadow-md"><!-- items container -->
            <div class="min-w-full h-full rounded-lg bg-gray-100 overflow-hidden shadow-md">
               <div><img src="{{ origin.imgurl }}" alt="{{ origin.alt }}" class="object-cover h-96" /></div>
               <div class="absolute bg-gray-800 bg-opacity-0 group-hover/item:bg-opacity-50 top-2/3 inset-x-0 text-center px-2 py-3">
                  <div class="text-2xl text-transparent group-hover/item:text-emerald-500 font-extrabold uppercase">{{ origin.name }}</div>
                  <div class="text-xl text-transparent group-hover/item:text-white font-bold">{{ origin.country }}</div> 
               </div>
            </div>
          </div>
          {% endfor %}
        </div>
        <div @click="scrollTo(prev)" x-show="prev !== null"
             class="block absolute top-1/2 left-0 bg-white text-3xl p-2 rounded-full transition-transform ease-in-out transform -translate-x-full -translate-y-1/2 group-hover:translate-x-0 cursor-pointer">
          <div><ion-icon name="chevron-back-outline"></ion-icon></div>
        </div>
        <div @click="scrollTo(next)" x-show="next !== null"
             class="block absolute top-1/2 right-0 bg-white p-2 text-3xl rounded-full transition-transform ease-in-out transform translate-x-full -translate-y-1/2 group-hover:translate-x-0 cursor-pointer">
          <div><ion-icon name="chevron-forward-outline"></ion-icon></div>
        </div>
      </div>
    </div>
  </div>
</div>

核心改动说明 #

• 新增拖拽状态变量：添加isDragging（标记拖拽状态）、startX（鼠标按下时的X坐标）、scrollStartX（拖拽起始滚动位置）三个变量，用于跟踪拖拽过程。
• 绑定拖拽事件：在初始化方法中给轮播容器绑定mousedown事件，同时给document绑定mousemove、mouseup、mouseleave事件，确保拖拽逻辑完整执行。
• 实现拖拽逻辑：
  • handleMouseDown：记录初始位置，临时禁用平滑滚动避免卡顿，阻止文字选中干扰拖拽。
  • handleMouseMove：拖拽过程中计算鼠标偏移量，实时更新容器滚动位置。
  • handleMouseUp：结束拖拽状态，恢复平滑滚动，触发update方法更新前后导航按钮的显示状态。
• UI细节优化：将容器光标样式改为cursor-grab active:cursor-grabbing，拖拽时显示更直观的光标；移除touch-pan-x避免与自定义拖拽逻辑冲突，移动端原生触摸滑动仍可正常使用。

内容的提问来源于stack exchange，提问作者chris-origins