實現拖拽複製和可排序的react.js組件

在實現複製前，對以前的拖拽排序組件屬性進行了修改。

1. 摒棄了value中的content屬性，拖拽組件暴露的render函數，利用這個屬性進行組件內部子組件的渲染，這點主要是參考了螞蟻金服的Ant design裏面一些組件的設計。
2. 爲了實現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：

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