溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發(fā)布時間：2020-09-15 21:27:40 來源：腳本之家 閱讀：229 作者：VicEcho 欄目：web開發(fā)

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

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

拖拽復制的效果如下：

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

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

具體實現(xiàn)代碼如下：

// 當一個元素或是選中的文字被拖拽釋放到一個有效的釋放目標位置時
 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”在每個拖拽組件初始化的時候生成。這樣我就可以通過它來判斷，當前被拖拽到目標區(qū)域的元素，是組件本身的內部元素還是外部元素，如果是內部就執(zhí)行排序功能，外部則執(zhí)行復制的邏輯代碼。

組件API：

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

GitHub地址：https://github.com/VicEcho/VDraggable

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手