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

由於我不考慮相容IE8等舊版本瀏覽器，拖拽的效果採用了HTML5的拖放（Drag 和 drop）。當然，如果要求相容性豐富，使用滑鼠點選的相關事件也很簡單。

實現的效果如下：

第一步是先了解H5拖放的相關屬性，MDN上有詳細的說明，連結

有一點需要注意的是，react.js會給所有的屬性事件名稱前加上"on",後面則為駝峰式寫法。例如原生的click事件，在react.js裡應使用onClick事件。

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

• draggable 當設定為true時，當前控制元件可以拖拽
• onDragStart 控制元件開始被拖拽時觸發的事件，它提供一個dataTransfer.setData()方法，將必要的資料儲存在物件中便於在其它方法中呼叫
• onDragOver 規定當前控制元件可以接收拖拽的元件的方法，一般在此方法中阻止冒泡
• onDragEnter 拖動後滑鼠進入另一個可接受區域時觸發，通過它可以實現移入效果
• onDragLeave a拖到b，離開b的時候觸發，可以用於監聽消除移入效果的時機
• 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,data,uId)}
     onDragOver={this.allowDrop.bind(this)}
     style={{ ...style }}>{item.content}</div>
   )
  })
 }
 render() {
  const { value,style } = this.props;
  return (
   <Row>
    <div style={{ display: 'flex',flexDirection: 'row' }}>
     {this.createDraggleComponent(value,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,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重新去渲染，以此控制順序。

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。