react 拖拽和换色

可以使用按钮控制移动, 也可以拖拽移动

可以使用按钮改变颜色

import React, {
  createRef,
  useState,
  useEffect,
} from "react";
import "./App.css";

function App() {
  const box = createRef<HTMLDivElement>();
  // x 横向, y 纵向
  const [position, setPosition] = useState({
    x: 0,
    y: 0,
  });

  useEffect(
    () => {
      console.log("update", box.current!.getBoundingClientRect());
    },
    [] // 空数组表示该函数只执行一次
  );

  const move = (dx = 0, dy = 0) => {
    console.log("move", dx, dy, box.current?.getBoundingClientRect());

    moveTo(position.x + dx, position.y + dy);
  };

  const moveTo = (x = 0, y = 0) => {
    console.log("moveTo", x, y);
    setPosition({
      x,
      y,
    });
  };

  const onMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
    console.log(e.pageX, e.pageY);
    setStartPositon({
      x: e.pageX,
      y: e.pageY,
    });
    setIsMove(true);
  };
  const onMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!isMove) return;
    console.log("onMouseMove", e.pageX, e.pageY);
    let dx = e.pageX - startPositon.x;
    let dy = e.pageY - startPositon.y;
    console.log("dx dy", dx, dy, position);
    setStartPositon({
      x: e.pageX,
      y: e.pageY,
    });
    moveTo(position.x + dx, position.y + dy);
  };
  const onMouseUp = (e: React.MouseEvent<HTMLDivElement>) => {
    console.log(e.pageX, e.pageY);
    setIsMove(false);
  };

  const [startPositon, setStartPositon] = useState({
    x: 0,
    y: 0,
  });
  const [className, setClassName] = useState("deepskyblue");
  const [isMove, setIsMove] = useState(false);

  return (
    <div className="App" onMouseMove={onMouseMove} onMouseUp={onMouseUp}>
      <div className="box-wrap">
        <div
          className={`box ${className}`}
          onMouseDown={onMouseDown}
          ref={box}
          style={{ left: position.x, top: position.y }}
        ></div>
      </div>

      <div className="btn-list">
        <button className="btn" onClick={() => move(0, -1)}>
          up
        </button>
        <button className="btn" onClick={() => move(0, 1)}>
          down
        </button>
        <button className="btn" onClick={() => move(-1, 0)}>
          left
        </button>
        <button className="btn" onClick={() => move(1, 0)}>
          right
        </button>
        <button className="btn" onClick={() => setClassName("red")}>
          red
        </button>
        <button className="btn" onClick={() => setClassName("green")}>
          green
        </button>
        <button className="btn" onClick={() => setClassName("deepskyblue")}>
          deepskyblue
        </button>
      </div>
    </div>
  );
}

export default App;

 

css

.App {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box-wrap {
  display: flex;
  position: relative;
}
.box {
  background: deepskyblue;
  width: 100px;
  height: 100px;
  position: relative;
}

.btn-list {
  position: absolute;
  top: 0;
}
.btn {
  position: relative;
}

.red {
  background: red;
}

.green {
  background: green;
}

.deepskyblue {
  background: deepskyblue;
}

 

来源：oschina

链接：https://my.oschina.net/ahaoboy/blog/4348007