javascript - React/AntDesign 如何使行可拖动？（表格拖动排序）

Question

我一直在编写这个简单的单列拖放表，但是当我拖动它们时行并没有移动。我在哪里修复或检查？

我正在使用 React、AntDesign 和 JavaScript（使用 TypeScript）

import * as React from 'react';

import ReactDOM from "react-dom";

import { Table } from "antd";

import { DndProvider, DragSource, DropTarget } from "react-dnd";

import HTML5Backend from "react-dnd-html5-backend";

import update from "immutability-helper";

let dragingIndex = -1;

interface propsDD {
    isOver: any,
    connectDragSource: any,
    connectDropTarget: any,
    moveRow: any,
    restProps: {
        readonly [x: string]: any;
        children?: React.ReactNode;
    }
    className: any,
    index: any,
}

class BodyRow extends React.Component<propsDD>{
    render() {
        const { isOver, connectDragSource, connectDropTarget, moveRow, ...restProps } = this.props;
        const style = { ...restProps, cursor: 'move' };
        let { className } = restProps;
        if (isOver) {
            if (restProps.index > dragingIndex) {
                className += " drop-over-downward";
            }
            if (restProps.index < dragingIndex) {
                className += " drop-over-upward";
            }
        }
        return connectDragSource(
            connectDropTarget(
                <tr {...restProps} className={className} style={style} />
            )
        );
    }
}

const rowSource = {
    beginDrag(props: any) {
        dragingIndex = props.index;
        return {
            index: props.index,
        };
    },
};

const rowTarget = {
    drop(props: any, monitor: any) {
        const dragIndex = monitor.getItem().index;
        const hoverIndex = props.index;
        if (dragIndex === hoverIndex) {
            return;
        }
        props.moveRow(dragIndex, hoverIndex);
        monitor.getItem().index = hoverIndex;
    },
};

const DragableBodyRow = DropTarget("row", rowTarget, (connect, monitor) => ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver()
}))(
    DragSource("row", rowSource, connect => ({
        connectDragSource: connect.dragSource()
    }))(BodyRow)
);

const columns = [
    {
        title: 'Orden de Ejecución',
        dataIndex: 'attributes.name',
        key: 'name',
    },
];

type propsFromList = {
    receivedTasks: Task[],
    onReceivedTasks: (tasks: Task[]) => void,
}

export default class DDTasks extends React.Component<propsFromList, State>{
    public state: State = {
        data: [],
    };

    components = {
        body: {
            row: DragableBodyRow,
        },
    };

    onReceivedTasks(tasks: Task[]): void {
        this.setState({
            data: this.props.receivedTasks,
        } as State)
    }

    moveRow = (dragIndex: any, hoverIndex: any) => {
        const { data } = this.state;
        const dragRow = data[dragIndex];
        this.setState(
            update(this.state, {
                data: {
                    $splice: [[dragIndex, 1], [hoverIndex, 0, dragRow]]
                }
            })
        );
    };

    render() {
        return (
            < DndProvider backend={HTML5Backend} >
                <Table
                    rowKey="id"
                    bordered={true}
                    pagination={false}
                    columns={columns}
                    dataSource={this.props.receivedTasks}
                    components={this.components}
                    onRow={(index) => ({
                        index,
                        moveRow: this.moveRow,
                    })}
                />
            </DndProvider >
        );
    }
}

我希望拖动行。实际显示的是行的内容。

标签： javascriptreactjstypescriptdrag-and-dropantd

Answer 1

这是一个简单的例子，我根据我在网上找到的许多不同的东西提出了一个简单的例子，并最终制定了一些适用于我的代码的东西：

基本上这是被调用的反应组件表的主体，我正在通过索引映射位置列表，并且每一行都是可拖动的，以允许用户修改表。我还包括了与属性关联的函数调用

return (
        <Tbody>
            {items.map((item, index) => (
                    <Tr key={index} className="item.name"
                        draggable={true}
                        onDragStart={this.dragstart}
                        onDragEnd={this.dragend}
                        onDragLeave={this.dragend}
                        onDragEnter={this.dragend}
                        onDrop={this.drop}
                        onDragOver={this.dragend}
                        id={index} >
                        <Td><span>{item.name}</span></Td>
                        <Td><span>{item.latitude}</span></Td>
                        <Td><span>{item.longitude}</span></Td>
                        <Td type="data"><span>{this.checkForZero(this.props.propDistances[index])}</span></Td>
                        <Td type="data"><span>{this.checkForZero(this.props.propCumulativeDist[index])}</span></Td>
                    </Tr>
            ))}
            {this.finishItineraryTable()}
        </Tbody>
    );

dragstart(event) {
    let dataTransfer = event.dataTransfer;
    let node = event.target;
    dataTransfer.setData('text/plain',node.innerHTML);
    dataTransfer.setData('id',node.id);
    event.stopPropagation();
}

dragend(event) {
    event.preventDefault();
}

drop(event) {
    event.preventDefault();
    let dragObjHtml = event.dataTransfer.getData("text/plain");
    let dragObjId = document.getElementById(event.dataTransfer.getData("id"));
    let dropTarget = event.target.closest("tr");
    let temp = dropTarget.innerHTML;
    dropTarget.innerHTML = dragObjHtml;
    dragObjId.innerHTML = temp;
}