react-drag-images-component v0.1.1

react-drag-images-component

介绍

图片拖拽排序的组件

安装

npm i -D react-drag-images-component

参数说明

通过数据渲染

import { DragImages } from "react-drag-images-component";

const App = () => {
  const handleChange = (data) => {
    console.log(data);
  };

  return <DragImages data={[]} onChange={handleChange} />;
};

自定义数据渲染

请确保 key 与 id 保持一致且不重复

import { DragImages } from "react-drag-images-component";

const App = () => {
  const [data, setData] = useState([]);

  const handleChange = (data) => {
    console.log(data);
  };
  return (
    <DragImges data={data} onChange={handleChange}>
      {data.map((item) => (
        <div key={item.id} className="aaa">
          <img
            src={item.url}
            style={{
              width: "100%",
              height: "100%",
              objectFit: "cover",
              cursor: "pointer",
            }}
            draggable="false"
          />
        </div>
      ))}
    </DragImges>
  );
};