快捷導(dǎo)航

React.js組件實(shí)現(xiàn)拖拽排序組件功能過程解析

更新時(shí)間：2020年04月27日 09:05:04 作者：白眉少俠

這篇文章主要介紹了React.js組件實(shí)現(xiàn)拖拽排序組件功能過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

因?yàn)槭褂昧藃eact.js技術(shù)棧，所以封裝優(yōu)先考慮輸入和輸出?；跀?shù)據(jù)驅(qū)動(dòng)去渲染頁(yè)面、控制拖拽元素的順序。

由于我不考慮兼容IE8等舊版本瀏覽器，拖拽的效果采用了HTML5的拖放（Drag 和 drop）。當(dāng)然，如果要求兼容性豐富，使用鼠標(biāo)點(diǎn)擊的相關(guān)事件也很簡(jiǎn)單。

實(shí)現(xiàn)的效果如下：

第一步是先了解H5拖放的相關(guān)屬性，MDN上有詳細(xì)的說(shuō)明，鏈接

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

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

draggable 當(dāng)設(shè)置為true時(shí)，當(dāng)前控件可以拖拽
onDragStart 控件開始被拖拽時(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ā)，通過它可以實(shí)現(xiàn)移入效果
onDragLeave a拖到b，離開b的時(shí)候觸發(fā)，可以用于監(jiān)聽消除移入效果的時(shí)機(jī)
onDrop 當(dāng)控件被“釋放”到一個(gè)有效的釋放目標(biāo)位置時(shí)觸發(fā)，我在這個(gè)方法中處理數(shù)據(jù)，并通過它調(diào)用onChange方法，將value值暴露給父組件

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

第二步，既然“她"是react.js的組件, 按照習(xí)慣，簡(jiǎn)單的將輸入屬性定為為value，同時(shí)，暴露onChange事件監(jiān)聽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，離開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í)候，并沒有使用.target.before(document.getElementById({id}))去實(shí)際操控節(jié)點(diǎn)，而是在每次觸發(fā)onDrop時(shí)間的時(shí)候，處理數(shù)據(jù)的sort，并通過onChange事件暴露給父組件，將數(shù)據(jù)輸出，通過改變value值觸發(fā)虛擬dom重新去渲染，以此控制順序。

根據(jù)公司的要求，在此基礎(chǔ)上，我還實(shí)現(xiàn)了拖拽復(fù)制的功能，這個(gè)等下次自己不懶的時(shí)候再記錄下來(lái)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: