今天就跟大家聊聊有關(guān)怎么在Html5中實(shí)現(xiàn)一個(gè)react拖拽排序組件，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

超過(guò)10多年行業(yè)經(jīng)驗(yàn)，技術(shù)領(lǐng)先，服務(wù)至上的經(jīng)營(yíng)模式，全靠網(wǎng)絡(luò)和口碑獲得客戶，為自己降低成本，也就是為客戶降低成本。到目前業(yè)務(wù)范圍包括了：成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)，成都網(wǎng)站推廣，成都網(wǎng)站優(yōu)化，整體網(wǎng)絡(luò)托管，微信平臺(tái)小程序開(kāi)發(fā)，微信開(kāi)發(fā)，重慶APP軟件開(kāi)發(fā)，同時(shí)也可以讓客戶的網(wǎng)站和網(wǎng)絡(luò)營(yíng)銷和我們一樣獲得訂單和生意！

第一步是先了解H5拖放的相關(guān)屬性，MDN上有詳細(xì)的說(shuō)明，鏈接為https://developer.mozilla.org/en-US/docs/Web/Events/dragstart

有一點(diǎn)需要注意的是，react.js會(huì)給所有的屬性事件名稱前加上"on",后面則為駝峰式寫法。例如原生的click事件，在react.js里應(yīng)使用onClick事件。

我的組件使用的拖放屬性如下：

• draggable 當(dāng)設(shè)置為true時(shí)，當(dāng)前控件可以拖拽

• onDragStart 控件開(kāi)始被拖拽時(shí)觸發(fā)的事件，它提供一個(gè)dataTransfer.setData()方法，將必要的數(shù)據(jù)存儲(chǔ)在對(duì)象中便于在其它方法中調(diào)用

• onDragOver 規(guī)定當(dāng)前控件可以接收拖拽的組件的方法，一般在此方法中阻止冒泡

• onDragEnter 拖動(dòng)后鼠標(biāo)進(jìn)入另一個(gè)可接受區(qū)域時(shí)觸發(fā)，通過(guò)它可以實(shí)現(xiàn)移入效果

• onDragLeave a拖到b，離開(kāi)b的時(shí)候觸發(fā)，可以用于監(jiān)聽(tīng)消除移入效果的時(shí)機(jī)

• onDrop 當(dāng)控件被“釋放”到一個(gè)有效的釋放目標(biāo)位置時(shí)觸發(fā)，我在這個(gè)方法中處理數(shù)據(jù)，并通過(guò)它調(diào)用onChange方法，將value值暴露給父組件

其中draggable，onDragStart是被“拖拽”方需要設(shè)置的屬性，onDragOver，onDragEnter，onDragLeave和onDrop是被“拖入”方需要設(shè)置的屬性。不過(guò)對(duì)于我的拖拽排序組件，每一個(gè)元素都是拖拽和拖入方

第二步，既然“她"是react.js的組件, 按照習(xí)慣，簡(jiǎn)單的將輸入屬性定為為value，同時(shí)，暴露onChange事件監(jiān)聽(tīng)value的變化，并將其暴露給父組件，同時(shí)，暴露一個(gè)屬性sortKey告訴組件使用哪個(gè)key作為排序字段。
既然涉及到排序，同時(shí)允許指定組件每個(gè)元素的內(nèi)部子組件，我將輸入數(shù)據(jù)格式定義為一個(gè)數(shù)組對(duì)象，其中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
                }]

根據(jù)value我去生成可排序組件的每個(gè)node，關(guān)鍵代碼如下：

// 生成拖拽組件
    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>
        )
    }

其中的屬性方法具體實(shí)現(xiàn)：

// 拖動(dòng)事件
    domdrugstart(sort, code, ee) {
        ee.dataTransfer.setData("code", code);
        ee.dataTransfer.setData("sort", sort);
    }
    // 拖動(dòng)后鼠標(biāo)進(jìn)入另一個(gè)可接受區(qū)域
    dragenter(ee) {
        ee.target.style.border = '2px dashed #008dff';
        ee.target.style.boxShadow = '0 0 8px rgba(30, 144, 255, 0.8)';
    }
    // a拖到b，離開(kāi)b的時(shí)候觸發(fā)
    dragleave(ee) {
        ee.target.style.border = '1px solid grey';
        ee.target.style.boxShadow = '';
    }
    // 對(duì)象排序
    compare(key) {
        return (obj1, obj2) => {
            if (obj1[key] < obj2[key]) {
                return -1;
            } else if (obj1[key] > obj2[key]) {
                return 1;
            }
            return 0
        }
    }
    // 當(dāng)一個(gè)元素或是選中的文字被拖拽釋放到一個(gè)有效的釋放目標(biāo)位置時(shí)
    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();
    }

值得注意的點(diǎn)其實(shí)只有一個(gè)，我控制順序的時(shí)候，并沒(méi)有使用.target.before(document.getElementById({id}))去實(shí)際操控節(jié)點(diǎn)，而是在每次觸發(fā)onDrop時(shí)間的時(shí)候，處理數(shù)據(jù)的sort，并通過(guò)onChange事件暴露給父組件，將數(shù)據(jù)輸出，通過(guò)改變value值觸發(fā)虛擬dom重新去渲染，以此控制順序。

看完上述內(nèi)容，你們對(duì)怎么在Html5中實(shí)現(xiàn)一個(gè)react拖拽排序組件有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

文章題目：怎么在Html5中實(shí)現(xiàn)一個(gè)react拖拽排序組件
本文地址：http://aaarwkj.com/article48/pchjhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、定制開(kāi)發(fā)、云服務(wù)器、網(wǎng)站維護(hù)、品牌網(wǎng)站制作、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)