HTML 5ドラッグアンドドロップ(DragとDrop)によるTable間データのインタラクション

前言
開発者として、私たちはいつも何気なく頭の痛いニーズに遭遇します.例えば色とりどりの黒、携帯ケースによってアプリの色を変えるなど、どうすればいいですか.一般的にはそれほど手を焼くことはありませんが、需要が手に入ったばかりのときは困っています.
テーブル間データ転送
AテーブルのデータはBテーブルのデータに沿って必要であり、できるだけ少ないステップが必要であるというニーズに遭遇したことがある.具体的には、次のような効果を達成することを意味します.
これはこのようにするべきで、直接製品に言って、実現できません.
しかし、製品は私に、だめだ、だめだ、実現しなければならないと教えてくれた.
仕方がないから、妥協するしかない.
の手入れを
OK、私達は理の構想に来て、まず既存の主要な開発環境を確定します:

フレームワーク:react

UIライブラリ:antd

上図に示すドラッグアンドドロップ効果を実現する以上、HTML 5のドラッグアンドドロップ一連のAPI(DragやDropなど)が主役に違いない.原生APIおよび用法はここをクリックで模索することができる.
APIを熟知した后に私达は需要に対して分析を行って、3つの要点を明确にします:第1はドラッグ&ドロップの动作で、これはドラッグ&ドロップのAPIでとても良い解决することができます;第二に、テーブル間のデータインタラクション、すなわち、テーブルBの一部のデータ(シーケンス番号)をテーブルA(沿用情報)に追加する方法である.第三に、テーブルBの各行のシーケンス番号とテーブルAの沿用情報は一対多の関係であり、テーブルAの沿用情報は追加しても置換してもよい.
解決すべきポイントを明らかにしたら、codingに着手することができます.
具体的な実装
まず、2つのテーブルを作成し、偽のデータを作成します.

import React, { Component } from 'react';
import {Table, Row, Col, Button} from 'antd';

export class App extends Component {
    columnsA
    columnsB
    constructor(props) {
        super(props);
        this.columnA = [
            {
                title: '  ',
                dataIndex: 'name',
                key: 'name',
            },
            {
                width: 100,
                title: '    ',
                dataIndex: 'obj',
                key: 'obj',
            }
        ]
        this.columnsB = [
            {
                title: '  ',
                dataIndex: 'num',
                key: 'num',
            },
            {
                title: '  ',
                dataIndex: 'info',
                key: 'info',
            }
        ]
        this.state = {
            dataSourceA: [
                {
                    key: '1',
                    name: '  ',
                    obj: ''
                },
                {
                    key: '2',
                    name: '  ',
                    obj: ''
                },
                {
                    key: '3',
                    name: '  ',
                    obj: ''
                }
            ],
            dataSourceB: [
                {
                    key: '1',
                    num: '1',
                    info: '   '
                },
                {
                    key: '2',
                    num: '2',
                    info: '   '
                },
                {
                    key: '3',
                    num: '3',
                    info: '   '
                }
            ]
            
        }
    }

    componentDidMount(){
        
    }

    render(){
        return (
            

                
                    
                        
        )
    }
}
    ：
           ，       antd Table  ，              columns   ，         API    。          ，               。         ，              ：
this.columnA = [
    {
        title: '  ',
        dataIndex: 'name',
        key: 'name',
    },
    {
        width: 100,
        title: '    ',
        dataIndex: 'obj',
        key: 'obj',
        render: (value, row, index) => {
            return 
 {
                    e.preventDefault();
                    this.drop(e)
                }}
                onDragOver={this.allowDrop}
            >{value}
        }
    }
]

this.columnsB = [
    {
        title: '  ',
        dataIndex: 'num',
        key: 'num',
        render: (value, row, index) => {
            return 
 {
                this.drag(e)
            }}>{value}
        }
    },
    {
        title: '  ',
        dataIndex: 'info',
        key: 'info',
    }
]
 
drag = (e) => {
    console.log(e)
};

drop = (e) => {
    console.log(e);
};

allowDrop = (e) => {
    e.preventDefault();
};
  は  の りです.ドラッグアンドドロップ  はありますが、2つのテーブルのデータは  していませんので、 にデータの  を います.データの  には、ドラッグ＆ドロップAPIを  します.
 dataTransfer.setData()メソッドは、ドラッグされたデータのデータ と を  します.
  
 dataTransfer.getData()メソッドは、ドラッグされたデータを  します.このメソッドは、setData()メソッドで じタイプに  されているデータを します.
  
// columnsA
{
    width: 100,
    title: '    ',
    dataIndex: 'obj',
    key: 'obj',
    render: (value, row, index) => {
        return 
 {
                e.preventDefault();
                this.drop(e)
            }}
            onDragOver={this.allowDrop}
        >{value}
    }
}

// columnsB
{
    title: '  ',
    dataIndex: 'num',
    key: 'num',
    render: (value, row, index) => {
        return 
 {
                this.drag(e,value)
            }}>{value}
    }
},
 
drag = (e,value) => {
    console.log(e)
    e.dataTransfer.setData('value', value)
};

drop = (e, key) => {
    let value = e.dataTransfer.getData('value')
    console.log("    :",value);
};
は、ドラッグしたデータを  できるようになったことを しています.  に Aのデータを  し、まずdataSourceAを  し、その の  のkeyとデータを け れる  のkeyが しい  、では、この  のobjフィールドに を けます:
// columnsA
{
    width: 100,
    title: '    ',
    dataIndex: 'obj',
    key: 'obj',
    render: (value, row, index) => {
        return 
 {
                e.preventDefault();
                this.drop(e, row.key)
            }}
            onDragOver={this.allowDrop}
        >{value}
    }
}
 
drop = (e, key) => {
    let value = e.dataTransfer.getData('value')
    console.log("    :",value);
    let data = this.state.dataSourceA;
    data.forEach((item) => {
        if (item.key == key) {
            item.obj = value
        }
    });
    this.setState({
        dataSourceA: data
    })
};
  を てみましょう:もちろん、 Aのデータを  してみることもできます:データが  に わった~~このdemoは   に  しても、  のコードを  するのは くありませんが、  のdemoの  なコードです.  https://www.runoob.com/html/h... https://developer.mozilla.org...  に くの  に  する  は、 し  そうに えますが、よく  して  を  すれば、いつも い   を つけることができます.  に  やもっと い  があれば、  を  して、みんなで  します~