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;

参数

| 参数 | 说明 | 默认值 | 类型 | 必选 | | ------------- | ---------------------------------------------- | ------ | -------------------------------------------------------- | :--: | | inParentInner | 拖动范围内限制在父元素之内，请为父元素添加定位 | false | boolean | × | | onDragEnd | 拖动结束时的回调 | | onDragEnd?: (dragProps: ProvidedT["dragProps"]["translate"]) => void; | × | | children | 子元素 | | (provided: ProvidedT) => JSX.Element | √ |

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