可拖动项目到达边缘时颤动滚动视图 - TypeScript

本篇文章将教你如何在 TypeScript 中实现当可拖动项目到达边缘时颤动滚动视图的功能。我们将使用 React 和 React DnD 库来实现这一效果。

什么是 React DnD？

React DnD 是一个 React 拖放库，它可以让你很方便地实现拖放功能。它是基于 HTML5 拖放 API 的封装，并提供了一系列高级功能。

实现思路

• 将要拖动的元素作为一个可拖拽对象，并将其与目标容器关联。
• 当拖动元素接触到目标容器的边缘时，自动滚动容器的滚动条。
• 当拖动元素接触到目标容器的边缘时，让容器的边框边缘颤动，以提示用户。

代码实现

创建可拖拽元素和目标容器

import { useDrag } from "react-dnd";

interface DraggableItemProps {
  item: any;
}

const DraggableItem = ({ item }: DraggableItemProps) => {
  const [, drag] = useDrag(() => ({
    type: "ITEM",
    item: item
  }));

  return (
    <div ref={drag}>可拖拽元素</div>
  );
};

const Container = () => {
  return (
    <div style={{ height: "300px", overflow: "auto" }}>
      <div style={{ height: "1000px" }}>目标容器</div>
    </div>
  )
};

上述代码中，我们创建了一个可拖拽元素和一个目标容器。我们通过 useDrag hook 使元素变为可拖拽的，并将其 type 设为 "ITEM"，设置了拖动时传递的 item。

滚动容器滚动条

import { useDrag } from "react-dnd";
import { useState, useEffect, useRef } from "react";

const Container = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const [scrollInterval, setScrollInterval] = useState<number | null>(null);

  useEffect(() => {
    return () => clearInterval(scrollInterval);
  }, []);

  const handleScroll = () => {
    const container = containerRef.current;
    if (container) {
      const { scrollTop, scrollHeight, offsetHeight } = container;
      if (scrollTop + offsetHeight >= scrollHeight - 50) {
        clearInterval(scrollInterval);
      }
      else if (scrollTop <= 0) {
        clearInterval(scrollInterval);
      }
      else {
        container.scrollTop += scrollTop > 0 ? 5 : -5;
      }
    }
  };

  const startScroll = (distance: number) => {
    clearInterval(scrollInterval);
    setScrollInterval(setInterval(() => handleScroll(), 10));
  };

  const stopScroll = () => {
    clearInterval(scrollInterval);
    setScrollInterval(null);
  };

  return (
    <div
      ref={containerRef}
      style={{ height: "300px", overflow: "auto" }}
      onMouseEnter={() => startScroll(-1)}
      onMouseLeave={() => stopScroll()}
    >
      <div style={{ height: "1000px" }}>目标容器</div>
    </div>
  )
};

上述代码中，我们通过 useRef hook 获取了目标容器的 DOM 节点，并创建了一个 scrollInterval 状态来保存容器的滚动计时器。当容器的 scrollTop 值到达边界时，清除计时器。

当鼠标进入容器时，启动滚动计时器，将 distance 设置为负值，执行向上滚动，当鼠标离开容器时，停止滚动。

颤动容器的边框边缘

const Container = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const [scrollInterval, setScrollInterval] = useState<number | null>(null);
  const [isShaking, setIsShaking] = useState<boolean>(false);

  useEffect(() => {
    return () => clearInterval(scrollInterval);
  }, []);

  const handleScroll = () => {
    const container = containerRef.current;
    if (container) {
      const { scrollTop, scrollHeight, offsetHeight } = container;
      if (scrollTop + offsetHeight >= scrollHeight - 50) {
        clearInterval(scrollInterval);
      }
      else if (scrollTop <= 0) {
        clearInterval(scrollInterval);
      }
      else {
        container.scrollTop += scrollTop > 0 ? 5 : -5;
      }
    }
  };

  const startScroll = (distance: number) => {
    clearInterval(scrollInterval);
    setScrollInterval(setInterval(() => handleScroll(), 10));
  };

  const stopScroll = () => {
    clearInterval(scrollInterval);
    setScrollInterval(null);
  };

  const scrollContainer = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    const container = containerRef.current;
    if (container) {
      const { scrollTop, scrollHeight, offsetHeight } = container;
      const mouseY = e.clientY - container.offsetTop;
      if (mouseY < 50 && scrollTop > 0) {
        setIsShaking(true);
      }
      else if (mouseY > offsetHeight - 50 && scrollTop + offsetHeight < scrollHeight) {
        setIsShaking(true);
      }
      else {
        setIsShaking(false);
      }
    }
  };

  return (
    <div
      ref={containerRef}
      style={{ height: "300px", overflow: "auto", border: isShaking ? "1px solid red" : "none" }}
      onMouseEnter={() => startScroll(-1)}
      onMouseLeave={() => stopScroll()}
      onMouseMove={(e) => scrollContainer(e)}
    >
      <div style={{ height: "1000px" }}>目标容器</div>
    </div>
  )
};

上述代码中，我们创建了一个 isShaking 状态来记录容器的边框是否要颤动，当鼠标在容器的顶部或底部时，将 isShaking 设置为 true，此时将边框设为红色，当鼠标离开容器时，将 isShaking 设置为 false，边框恢复原来的颜色。

总结

通过上述代码实现，我们可以在 TypeScript 中实现当可拖动项目到达边缘时颤动滚动视图。我们通过 React 和 React DnD 库来实现了这一功能，同时添加了滚动容器滚动条和颤动容器边框边缘的功能，使用户体验更加友好。