【练习小demo】使用React+TS实现一个拖动换位置效果（同时应用节流）

本文链接：https://blog.csdn.net/qq_44831027/article/details/109701676

本练习demo旨在练习ts的使用，同时熟悉drag相关的事件

1.思路分析

mouse拖拽事件，通常有三个非常重要的过程:onMouseDown(鼠标按下) onMouseMove（鼠标拖动） onMouseUp（鼠标松开），通常我们在使用mouse拖拽这一事件的过程中，大概就是在这三个事件中进行相应的处理
我们最终要实现的demo效果，就是在鼠标按下后能够带动方块随鼠标位置移动，松开后固定在最后的位置。
如图：

移动后:

而这，只需要控制相关的定位:left和top就能实现这个功能（注意，left和top使用前，其position必须被规定为非static（默认）
在这里我们采用最简单的fixed布局就好（当然其他的也可以）

2.与react结合

我们采用react+ts来编写这个demo
创建命令:

npx create-react-app my-drag-demo --typescript

创建后直接改动app.tsx

3.节流函数的编写

节流函数的关键在于设置一个闸门，为了避免全局污染，我们用闭包来返回一个由节流函数包装后的函数
手写节流函数这种操作就不再这里赘述了

const throttle: (func: Function, interval: number) => Function = (
  func: Function,
  interval: number
) => {
   
  let timer: any = null;
  return (...arg: any) => {
   
    if (!timer) {
   
      timer = setTimeout(() => {
   
        func(...arg);
        timer = null;
      }, interval);
    }
  };
};