@dsh-prose/react-drag v1.0.3

react 拖拽

兼容 PC、移动端

使用

import ReactDrag from "@dsh-prose/react-drag";

function App(): JSX.Element {
  return (
    <ReactDrag
      onDragEnd={(translate) => {
        console.log("translate", JSON.stringify(translate));
      }}
    >
      {(provided) => {
        console.log("provided", JSON.stringify(provided));
        return (
          <p
            ref={provided.innerRef}
            style={{
              width: 100,
              height: 100,
              border: "1px solid",
              margin: 10,
              ...provided.dragProps.style,
            }}
          >
            Box
          </p>
        );
      }}
    </ReactDrag>
  );
}

export default App;

参数

interface ProvidedT {
  innerRef: (element?: HTMLElement | null) => void;
  dragProps: {
    type: "initial" | "start" | "move" | "end";
    translate: [number, number];
    style: React.CSSProperties;
  };
}