.sortable-ghost {
  border-bottom: 2px dashed #1890ff;
.doctor-drag-table {
  margin-bottom: 16px;
  table {
    width: 100%;
      padding: 12px;
      border-bottom: 1px solid #e8e8e8;
    thead {
        font-weight: 600;
        background: #FAFAFA;
实现效果：
 
 
 如有问题，请联系QQ: 1518667459
                    1.使用antd的Table自带排序功能参照官方文档： https://ant.design/components/table-cn/#components-table-demo-drag-sorting2.使用sortablejs插件可参照文档：https://segmentfault.com/a/1190000008209715	//安装	cnpm install sortablej...
				
###1.使用的方式:sortablejs(缘由:我的react版本是15.的,使用antd推荐的不兼容下载的npm包,费了一些时间才找到解决办法)
ps:个人觉得比antd推荐的方法要简单很多 代码量也很少    “sortablejs”: “^1.7.0”
##DOM结构
<div className="goodsTable" ref={this.sortableGoods}>
           <Table dataSource={goods} columns={columns}
一、zent - Sortable 拖拽排序（推荐、简单明了）
zent 官网 https://zent-contrib.gitee.io/zent/zh/component/sortable
zent githubApi文档 https://zent-contrib.gitee.io/zent/apidoc/
yarn add zent
npm install zent --save 
				
react+antd用react-resizable实现Table拖拽调整列宽
npm下载依赖包
npm install --save react-resizable
如果上述报错缺依赖包react-draggable还需要引入react-draggable包，并重启项目
import React, {PureComponent} from 'react';
import { Resizab...
				
React-dnd 拖拽排序是一种常见的前端交互方式，可以通过以下代码实现：1. 首先需要安装 react-dnd 和 react-dnd-html5-backend 两个库：```
npm install --save react-dnd react-dnd-html5-backend
```2. 在组件中引入 DragDropContext、Droppable 和 Draggable 组件：```
import { DragDropContext, Droppable, Draggable } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
```3. 定义一个数组作为拖拽列表的数据源：```
const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
  { id: 4, name: 'Item 4' },
  { id: 5, name: 'Item 5' },
```4. 在组件中使用 DragDropContext 组件包裹整个列表，并在其中使用 Droppable 组件包裹每个拖拽项：```
<DragDropContext backend={HTML5Backend}>
  <Droppable droppableId="items">
    {(provided) => (
      <ul {...provided.droppableProps} ref={provided.innerRef}>
        {items.map((item, index) => (
          <Draggable key={item.id} draggableId={item.id.toString()} index={index}>
            {(provided) => (
                {...provided.draggableProps}
                {...provided.dragHandleProps}
                ref={provided.innerRef}
                {item.name}
          </Draggable>
        {provided.placeholder}
  </Droppable>
</DragDropContext>
```5. 在 Draggable 组件中使用 provided.draggableProps 和 provided.dragHandleProps 属性来实现拖拽功能，同时使用 provided.innerRef 属性来获取拖拽元素的引用。6. 在 Droppable 组件中使用 provided.droppableProps 和 provided.innerRef 属性来实现拖拽排序功能。7. 最后，需要在 DragDropContext 组件中定义 onDragEnd 回调函数来处理拖拽结束后的逻辑：```
function onDragEnd(result) {
  if (!result.destination) {
    return;
  }  const newItems = Array.from(items);
  const [reorderedItem] = newItems.splice(result.source.index, 1);
  newItems.splice(result.destination.index, , reorderedItem);  setItems(newItems);
}<DragDropContext backend={HTML5Backend} onDragEnd={onDragEnd}>
</DragDropContext>
```8. 在 onDragEnd 回调函数中，首先判断是否有目标位置，如果没有则直接返回。然后使用 Array.from 方法复制一份原始数据源，从中取出被拖拽的元素并删除，再将其插入到目标位置中，最后使用 setItems 函数更新数据源。以上就是 react-dnd 拖拽排序的代码实现。