Reactjs 如何创建可拖动组件以在React中选择年份？

我需要在React中创建可拖动组件（没有任何库的帮助）。下面我添加了一张照片，看看它看起来如何。 现在，我的组件看起来：

import React from 'react';
import { IYearBar } from './YearBar.model';
import { 
  StyledYear, 
  StyledYearBar 
} from './YearBar.styled';

const YearBar = ({ year }: IYearBar): JSX.Element => {
  return (
    <StyledYearBar>
      <StyledYear className="second"> {year - 2} </StyledYear>
      <StyledYear className="first"> {year - 1} </StyledYear>
      <StyledYear> {year} </StyledYear>
      <StyledYear className="first"> {year + 1} </StyledYear>
      <StyledYear className="second"> {year + 2} </StyledYear>
    </StyledYearBar>
  );
};

export default YearBar;

从“React”导入React；
从“./YearBar.model”导入{IYearBar}；
导入{
StyledYear，
StyledYearBar
}来自“./YearBar.styled”；
const YearBar=（{year}:IYearBar）：JSX.Element=>{
返回(
{year-2}
{year-1}
{year}
{year+1}
{year+2}
);
};
导出默认值栏；

我想动态滚动浏览这个，如果我释放鼠标按钮，所选年份应该保持在中间。是否有人尝试创建类似的组件？我想问一些建议和资料，可以告诉我如何做。提前谢谢。

---

本质上，你关心两件事：拖动和释放

当用户拖动时，您需要将YearBar与它们一起拖动。你可以通过CSS重新定位你的YearBar，并留下一个负的边距或CSS转换

这段时间会有一些奇怪的中间产物，你处于两年之间

当用户发布时，您希望“捕捉”以使最近的年份完全可见并居中。这样做的一个典型方法是根据每年的宽度和当前位置计算重点年份