react.js組件實現拖拽復制和可排序的示例代碼

2019-11-19 13:12:39

字體：大中小

來源：轉載

供稿：網友

在實現復制前，對之前的拖拽排序組件屬性進行了修改。

摒棄了value中的content屬性，拖拽組件暴露的render函數，利用這個屬性進行組件內部子組件的渲染，這點主要是參考了螞蟻金服的Ant design里面一些組件的設計。
為了實現Data和model的脫藕，和sortKey一樣，組件增加codeKey屬性。

拖拽復制的效果如下：

由于實現組件的核心是根據value數據來渲染頁面，因此實現拖拽復制功能，只需要在“拖拽釋放”的時候，將被拖拽方的數據放到當前目標所在的value數組中即可。

具體實現代碼如下：

// 當一個元素或是選中的文字被拖拽釋放到一個有效的釋放目標位置時 drop(dropedSort, data, sortKey, dropedUid, codeKey, ee) {  ee.preventDefault();  const code = ee.dataTransfer.getData("code");  const uId = ee.dataTransfer.getData("uId");  const dragedItem = ee.dataTransfer.getData("item");  const sort = ee.dataTransfer.getData("sort");  if (uId === dropedUid) {   if (sort < dropedSort) {    data.map(item => {     if (item[codeKey] === code) {      item[sortKey] = dropedSort;     } else if (item[sortKey] > sort && item[sortKey] < dropedSort + 1) {      item[sortKey]--;     }     return item;    });   } else {    data.map(item => {     if (item[codeKey] === code) {      item[sortKey] = dropedSort;     } else if (item[sortKey] > dropedSort - 1 && item[sortKey] < sort) {      item[sortKey]++;     }     return item;    });   }  } else if (this.props.isAcceptAdd) {   let objDragedItem = JSON.parse(dragedItem);   if (data.filter(item => item[codeKey] === objDragedItem[codeKey]).length === 0) {    const maxSort = Math.max.apply(Math, data.map(citem => citem[sortKey]));    data.map(item => {     if (dropedSort === maxSort) {      objDragedItem[sortKey] = dropedSort + 1;     } else {      if (item.sort > dropedSort) {       objDragedItem[sortKey] = dropedSort + 1;       item[sortKey]++      }     }     return item    });    data.push(objDragedItem)   }  }  this.props.onChange(data)  if (ee.target.className.indexOf('droppingContent') !== -1) {   ee.target.className = styles.droppedcontent;  } }

這里要注意的有兩點：

第一點是，我通過this.props.isAcceptAdd這個屬性來判斷當前組件是否允許接受拖拽復制的元素。

第二點是，我有一個放在內存中的“uId”，這個“uId”在每個拖拽組件初始化的時候生成。這樣我就可以通過它來判斷，當前被拖拽到目標區域的元素，是組件本身的內部元素還是外部元素，如果是內部就執行排序功能，外部則執行復制的邏輯代碼。

組件API：