实现可拖拽CSS Toggle Switch：现有开关拖拽功能异常求助

当然可行！我们可以通过监听鼠标/触摸拖拽事件，跟踪手柄的位移，当拖拽幅度达到开关的一半宽度时自动切换状态，同时保留原有的点击切换功能。下面是完整的实现方案：

调整后的CSS代码 #

先微调原有CSS，移除拖拽时不需要的固定宽度放大，让手柄的位置可以通过JS灵活控制：

/* SWITCH */
.form-switch {
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none; /* 防止拖拽时意外选中文本 */
}
.form-switch i {
  position: relative;
  display: inline-block;
  margin-right: .5rem;
  width: 46px;
  height: 26px;
  background-color: #e6e6e6;
  border-radius: 23px;
  vertical-align: text-bottom;
  transition: background-color 0.3s linear; /* 仅保留背景色过渡动画 */
}
.form-switch i::before {
  content: "";
  position: absolute;
  left: 0;
  width: 42px;
  height: 22px;
  background-color: #fff;
  border-radius: 11px;
  transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
  transition: all 0.25s linear;
}
.form-switch i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 22px;
  background-color: #fff;
  border-radius: 11px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
  transform: translate3d(2px, 2px, 0);
  transition: transform 0.2s ease-in-out; /* 仅保留位置过渡动画 */
}
.form-switch input {
  display: none;
}
.form-switch input:checked + i {
  background-color: #4BD763;
}
.form-switch input:checked + i::before {
  transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
}
.form-switch input:checked + i::after {
  transform: translate3d(22px, 2px, 0);
}

jQuery拖拽逻辑实现 #

利用鼠标和触摸事件跟踪拖拽过程，实时更新手柄位置，并判断是否触发状态切换：

$(document).ready(function() {
  const switchEl = $('.form-switch');
  const switchTotalWidth = 46;    // 开关整体宽度
  const handleWidth = 22;         // 手柄宽度
  const maxMoveOffset = switchTotalWidth - handleWidth - 4; // 手柄可移动的最大距离（左右各留2px边距）
  const toggleThreshold = maxMoveOffset / 2; // 触发状态切换的位移阈值

  switchEl.on('mousedown touchstart', function(e) {
    e.preventDefault();
    const $switch = $(this);
    const $input = $switch.find('input');
    const isCheckedInitially = $input.is(':checked');
    // 记录拖拽起始点坐标
    const startX = e.type === 'touchstart' ? e.originalEvent.touches[0].clientX : e.clientX;
    // 手柄初始偏移量（选中状态下在最右侧，未选中在最左侧）
    let initialOffset = isCheckedInitially ? maxMoveOffset : 0;

    // 监听拖拽过程
    $(document).on('mousemove touchmove', function(e) {
      e.preventDefault();
      const currentX = e.type === 'touchmove' ? e.originalEvent.touches[0].clientX : e.clientX;
      // 计算当前拖拽产生的偏移量
      let currentOffset = initialOffset + (currentX - startX);
      // 限制偏移量在0到maxMoveOffset之间，防止手柄超出开关范围
      currentOffset = Math.max(0, Math.min(maxMoveOffset, currentOffset));

      // 实时更新手柄位置
      $switch.find('i').css('--handle-offset', `${currentOffset + 2}px`);
      // 同步更新背景遮罩（before伪元素）的状态
      const beforeOffset = currentOffset >= toggleThreshold ? 18 : 2;
      const beforeScale = currentOffset >= toggleThreshold ? 0 : 1;
      $switch.find('i::before').css('transform', `translate3d(${beforeOffset}px, 2px, 0) scale3d(${beforeScale}, ${beforeScale}, ${beforeScale})`);
    });

    // 拖拽结束时判断是否切换状态
    $(document).on('mouseup touchend', function(e) {
      $(document).off('mousemove touchmove mouseup touchend');
      const currentX = e.type === 'touchend' ? e.originalEvent.changedTouches[0].clientX : e.clientX;
      const finalOffset = initialOffset + (currentX - startX);

      // 根据最终位移判断是否触发状态切换
      if (finalOffset > toggleThreshold) {
        $input.prop('checked', true);
      } else if (finalOffset < toggleThreshold) {
        $input.prop('checked', false);
      }
      // 触发change事件，确保状态同步
      $input.trigger('change');
    });
  });

  // 保留原有的点击切换功能（点击文字区域也能切换）
  switchEl.on('click', function(e) {
    if (!$(e.target).closest('i').length) {
      const $input = $(this).find('input');
      $input.prop('checked', !$input.is(':checked')).trigger('change');
    }
  });
});

实现说明 #

• 拖拽跟踪：通过mousedown/touchstart记录初始位置，mousemove/touchmove实时计算位移，限制手柄始终在开关范围内移动
• 状态判断：当拖拽距离超过开关可移动范围的一半时，自动切换checkbox的选中状态
• 视觉反馈：拖拽过程中实时更新手柄和背景遮罩的位置，松手后通过CSS过渡动画平滑恢复到最终状态
• 兼容性：同时支持鼠标和触摸事件，适配移动端和桌面端

这样修改后，你的开关既可以点击切换，也可以通过拖拽手柄来切换状态，拖拽幅度足够时会自动完成切换，完全符合你的需求！

内容的提问来源于stack exchange，提问作者gene b.