基於H5實現的react拖拽排序組件

拖拽排序組件Github地址：https://github.com/VicEcho/VD...

由於使用了react.js技術棧，因此封裝優先考慮輸入和輸出。基於數據驅動去渲染頁面、控制拖拽元素的順序。

因爲我不考慮兼容IE8等舊版本瀏覽器，拖拽的效果採用了HTML5的拖放（Drag 和 drop）。固然，若是要求兼容性豐富，使用鼠標點擊的相關事件也很簡單。

實現的效果以下：

第一步是先了解H5拖放的相關屬性，MDN上有詳細的說明，連接爲https://developer.mozilla.org...
有一點須要注意的是，react.js會給全部的屬性事件名稱前加上"on",後面則爲駝峯式寫法。例如原生的click事件，在react.js裏應使用onClick事件。

個人組件使用的拖放屬性以下：

1. draggable 當設置爲true時，當前控件能夠拖拽
2. onDragStart 控件開始被拖拽時觸發的事件，它提供一個dataTransfer.setData()方法，將必要的數據存儲在對象中便於在其它方法中調用
3. onDragOver 規定當前控件能夠接收拖拽的組件的方法，通常在此方法中阻止冒泡
4. onDragEnter 拖動後鼠標進入另外一個可接受區域時觸發，經過它能夠實現移入效果
5. onDragLeave a拖到b，離開b的時候觸發，能夠用於監聽消除移入效果的時機
6. onDrop 當控件被「釋放」到一個有效的釋放目標位置時觸發，我在這個方法中處理數據，並經過它調用onChange方法，將value值暴露給父組件

其中draggable，onDragStart是被「拖拽」方須要設置的屬性，onDragOver，onDragEnter，onDragLeave和onDrop是被「拖入」方須要設置的屬性。不過對於個人拖拽排序組件，每個元素都是拖拽和拖入方

第二步，既然「她"是react.js的組件, 按照習慣，簡單的將輸入屬性定爲爲value，同時，暴露onChange事件監聽value的變化，並將其暴露給父組件，同時，暴露一個屬性sortKey告訴組件使用哪一個key做爲排序字段。
既然涉及到排序，同時容許指定組件每一個元素的內部子組件，我將輸入數據格式定義爲一個數組對象，其中content能夠爲reactNode：

value: [
                {
                    content: 'div1',
                    code: '01',
                    sort: 0,
                },
                {
                    content: 'div2',
                    code: '02',
                    sort: 1
                },
                {
                    content: 'div3',
                    code: '03',
                    sort: 2
                },
                {
                    content: 'div5',
                    code: '05',
                    sort: 5
                },
                {
                    content: 'div4',
                    code: '04',
                    sort: 4
                }]

根據value我去生成可排序組件的每一個node，關鍵代碼以下：

// 生成拖拽組件
    createDraggleComponent(data, sortKey, style, uId) {
        return data.sort(this.compare(sortKey)).map((item) => {
            return (
                <div
                    className={styles.content}
                    key={item.code}
                    draggable={true}
                    onDragEnter={this.dragenter.bind(this)}
                    onDragLeave={this.dragleave.bind(this)}
                    onDragStart={this.domdrugstart.bind(this, item[sortKey], item.code, uId, item)}
                    onDrop={this.drop.bind(this, item[sortKey], data, sortKey, uId)}
                    onDragOver={this.allowDrop.bind(this)}
                    style={{ ...style }}>{item.content}</div>
            )
        })
    }
    render() {
        const { value, sortKey, style } = this.props;
        return (
            <Row>
                <div style={{ display: 'flex', flexDirection: 'row' }}>
                    {this.createDraggleComponent(value, sortKey, style)}
                </div>
            </Row>
        )
    }

其中的屬性方法具體實現：

// 拖動事件
    domdrugstart(sort, code, ee) {
        ee.dataTransfer.setData("code", code);
        ee.dataTransfer.setData("sort", sort);
    }
    // 拖動後鼠標進入另外一個可接受區域
    dragenter(ee) {
        ee.target.style.border = '2px dashed #008dff';
        ee.target.style.boxShadow = '0 0 8px rgba(30, 144, 255, 0.8)';
    }
    // a拖到b，離開b的時候觸發
    dragleave(ee) {
        ee.target.style.border = '1px solid grey';
        ee.target.style.boxShadow = '';
    }
    // 對象排序
    compare(key) {
        return (obj1, obj2) => {
            if (obj1[key] < obj2[key]) {
                return -1;
            } else if (obj1[key] > obj2[key]) {
                return 1;
            }
            return 0
        }
    }
    // 當一個元素或是選中的文字被拖拽釋放到一個有效的釋放目標位置時
    drop(dropedSort, data, sortKey, ee) {
        ee.preventDefault();
        const code = ee.dataTransfer.getData("code");
        const sort = ee.dataTransfer.getData("sort");
        if (sort < dropedSort) {
            data.map(item => {
                if (item.code === code) {
                    item[sortKey] = dropedSort;
                } else if (item[sortKey] > sort && item[sortKey] < dropedSort + 1) {
                    item[sortKey]--;
                }
                return item;
            });
        } else {
            data.map(item => {
                if (item.code === code) {
                    item[sortKey] = dropedSort;
                } else if (item[sortKey] > dropedSort - 1 && item[sortKey] < sort) {
                    item[sortKey]++;
                }
                return item;
            });
        }
        this.props.onChange(data)
    }
    allowDrop(ee) {
        ee.preventDefault();
    }

值得注意的點其實只有一個，我控制順序的時候，並無使用.target.before(document.getElementById({id}))去實際操控節點，而是在每次觸發onDrop時間的時候，處理數據的sort，並經過onChange事件暴露給父組件，將數據輸出，經過改變value值觸發虛擬dom從新去渲染，以此控制順序。

根據公司的要求，在此基礎上，我還實現了拖拽複製的功能，這個等下次本身不懶的時候再記錄下來。