1实现技术

• 项目运行环境：ant pro
• 拖拽技术插件：

              react-sortable-hoc        实现拖拽功能

             array-move                   实现拖拽过程中数据处理

两个重要的API

react-sortable-hoc - npm

import { SortableContainer, SortableElement } from 'react-sortable-hoc';  

       react-sortable-hoc 的两个 HOC， HOC，本质上高阶组件是参数为组件，返回值为新组件的函数。 

SortableElement

      每个需要被拖拽元素的容器，使用时传入每个拖拽元素对应的组件即可

const SortablePic = SortableElement((props: any) => <Pic {...props} />);

SortableContainer

        拖拽元素的外层容器即所有可排序拖拽元素的容器，使用时传入外层容器组件

const SortablePicContainer = SortableContainer(({ children }: { children: any }) => (
  <div>{children}</div>
));

一个重要的工具 array-move

array-move - npm

import { arrayMoveImmutable } from 'array-move';

拖动过程中，修改数据（数据源）。eg:

const array1 = arrayMoveImmutable(['a', 'b', 'c'], 1, 2); // ['a', 'c', 'b']

2实现思路

不加入拖拽功能之前——仅仅展示图片

数据源是写“死”的，即数据源不会发生任何改变——仅仅是展示而已

import React from 'react';
import a from '../imgas/WechatIMG151.jpeg';
import b from '../imgas/xinq.jpg';
import c from '../imgas/img.png';
import d from '../imgas/pic.jpg';

import Pic from '@/pages/proComponent/compoment/Pic';
const PicShow: React.FC<{}> = () => {
  const data = [a, b, c, d];

  return (
    <div>
      <h1>show those pic </h1>
      {data.map((pic) => (
        <Pic src={pic} />
      ))}
    </div>
  );
};
export default PicShow;

加入拖拽

• 需要动态改变数据（拖拽后其实是数据的位置发生了改变）；
• 给需要给拖拽的子组件包裹SortableElement，形成新的组件SortablePic
• 给需要给拖拽功能的父组件包裹SortableContainer，形成新的组件SortablePicContainer
• 因为是水平移动，故需要给SortablePicContainer加上axis="x"，默认的拖动是垂直的（axis='y'）;
• 需要给SortablePicContainer增加onSortEnd，在onSortEnd方法中修改数据源（数组） 

import React, { useState } from 'react';
import { SortableContainer, SortableElement } from 'react-sortable-hoc';
import { arrayMoveImmutable } from 'array-move';

import a from '../imgas/WechatIMG151.jpeg';
import b from '../imgas/xinq.jpg';
import c from '../imgas/img.png';
import d from '../imgas/pic.jpg';

import Pic from '@/pages/proComponent/compoment/Pic';

const SortablePic = SortableElement((props: any) => <Pic {...props} />);

const SortablePicContainer = SortableContainer(({ children }: { children: any }) => (
  <div>{children}</div>
));

const PicSort: React.FC<{}> = () => {
  const [data, setData] = useState<any>([a, b, c, d]);
  function onSortEnd({ oldIndex, newIndex }: { oldIndex: number; newIndex: number }) {
    if (oldIndex !== newIndex) {
      const newData = arrayMoveImmutable([].concat(data), oldIndex, newIndex).filter((el) => !!el);
      setData(newData);
    }
  }

  return (
    <div>
      <h1>Drag those pic around</h1>
      <SortablePicContainer axis="x" onSortEnd={onSortEnd}>
        {data.map((pic: string, i: number) => (
          <SortablePic src={pic} index={i} key={pic} />
        ))}
      </SortablePicContainer>
    </div>
  );
};
export default PicSort;

3.参考链接

博客

https://segmentfault.com/a/1190000020151524

ant design

表格 Table - Ant Design

npm

array-move - npm