使用h5實現react拖拽排序組件的方法（附代碼）

本篇文章給大家帶來的內容是關於使用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: 'p1',                    code: '01',                    sort: 0,                },                {                    content: 'p2',                    code: '02',                    sort: 1                },                {                    content: 'p3',                    code: '03',                    sort: 2                },                {                    content: 'p5',                    code: '05',                    sort: 5                },                {                    content: 'p4',                    code: '04',                    sort: 4                }]

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

    // 產生拖拽組件    createDraggleComponent(data, sortKey, style, uId) {        return data.sort(this.compare(sortKey)).map((item) => {            return (                <p                    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}</p>            )        })    }    render() {        const { value, sortKey, style } = this.props;        return (            <Row>                <p style={{ display: 'flex', flexDirection: 'row' }}>                    {this.createDraggleComponent(value, sortKey, style)}                </p>            </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重新去渲染，以此控制順序。

根據公司的要求，在此基礎上，我還實現了拖拽複製的功能。