React Examples

[WangShuXian6]

React Examples

[WangShuXian6]

Drag

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/drag_event

基本拖动

import React, {
  useState,
  useMemo,
  useEffect,
  useRef,
  useCallback,
  DragEvent,
} from "react";
import logo from "./logo.svg";
import styles from "./App.module.css";

function App() {
  const onDragStart = (e: DragEvent<HTMLDivElement>) => {
    console.log("onDragStart:", e.target);
  };
  const onDragEnd = (e: DragEvent<HTMLDivElement>) => {
    console.log("onDragEnd:", e.target);
  };
  const onDrop = (e: DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    console.log("onDrop:", e.target);
  };
  const onDragOver = (e: DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    //console.log("onDragOver:", e.target);
  };
  return (
    <>
      <div className={styles.wrapper}>
        <div className={styles.left}>
          <div
            // 可拖动模块
            onDragStart={onDragStart}
            onDragEnd={onDragEnd}
            draggable="true"
            className={styles.item}
          ></div>
        </div>
        <div onDrop={onDrop} onDragOver={onDragOver} className={styles.right}>
          {/* 拖动目标区域 */}
          <div className={styles.item}></div>
        </div>
      </div>
    </>
  );
}

export default App;