在實(shí)現(xiàn)復(fù)制前，對(duì)之前的拖拽排序組件屬性進(jìn)行了修改。
創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站、土默特右旗網(wǎng)絡(luò)推廣、成都小程序開(kāi)發(fā)、土默特右旗網(wǎng)絡(luò)營(yíng)銷、土默特右旗企業(yè)策劃、土默特右旗品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供土默特右旗建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com
拖拽復(fù)制的效果如下：
由于實(shí)現(xiàn)組件的核心是根據(jù)value數(shù)據(jù)來(lái)渲染頁(yè)面，因此實(shí)現(xiàn)拖拽復(fù)制功能，只需要在“拖拽釋放”的時(shí)候，將被拖拽方的數(shù)據(jù)放到當(dāng)前目標(biāo)所在的value數(shù)組中即可。
具體實(shí)現(xiàn)代碼如下：
重慶分公司
重慶分公司
// 當(dāng)一個(gè)元素或是選中的文字被拖拽釋放到一個(gè)有效的釋放目標(biāo)位置時(shí)
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;
}
}這里要注意的有兩點(diǎn)：
第一點(diǎn)是，我通過(guò)this.props.isAcceptAdd這個(gè)屬性來(lái)判斷當(dāng)前組件是否允許接受拖拽復(fù)制的元素。
第二點(diǎn)是，我有一個(gè)放在內(nèi)存中的“uId”，這個(gè)“uId”在每個(gè)拖拽組件初始化的時(shí)候生成。這樣我就可以通過(guò)它來(lái)判斷，當(dāng)前被拖拽到目標(biāo)區(qū)域的元素，是組件本身的內(nèi)部元素還是外部元素，如果是內(nèi)部就執(zhí)行排序功能，外部則執(zhí)行復(fù)制的邏輯代碼。
組件API：
GitHub地址：https://github.com/VicEcho/VDraggable
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
