這篇文章主要為大家展示了React.js組件怎么實現拖拽排序組件功能，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
因為使用了react.js技術棧，所以封裝優先考慮輸入和輸出?；跀祿寗尤ヤ秩卷撁?、控制拖拽元素的順序。
由于我不考慮兼容IE8等舊版本瀏覽器，拖拽的效果采用了HTML5的拖放（Drag 和 drop）。當然，如果要求兼容性豐富，使用鼠標點擊的相關事件也很簡單。
實現的效果如下：
第一步是先了解H5拖放的相關屬性，MDN上有詳細的說明，鏈接
有一點需要注意的是，react.js會給所有的屬性事件名稱前加上"on",后面則為駝峰式寫法。例如原生的click事件，在react.js里應使用onClick事件。
我的組件使用的拖放屬性如下：
其中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重新去渲染，以此控制順序。
根據公司的要求，在此基礎上，我還實現了拖拽復制的功能，這個等下次自己不懶的時候再記錄下來。
以上就是關于React.js組件怎么實現拖拽排序組件功能的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
