1. 需求分析

實現(xiàn)一個CMS內(nèi)容管理系統(tǒng)，在后臺進行內(nèi)容編輯，在官網(wǎng)更新展示內(nèi)容。

關(guān)于后臺的編輯功能，大致分為兩部分：組件拖拽預(yù)覽、組件內(nèi)容編輯實時預(yù)覽。

對于組件拖拽預(yù)覽，用戶可以在含有各種功能組件的列表中，選擇需要的組件進行拖拽。將組件拖拽到預(yù)覽畫布中后，可以在畫布中預(yù)覽組件的內(nèi)容。

對于組件內(nèi)容編輯實時預(yù)覽，用戶可以點擊編輯按鈕，顯示對應(yīng)組件的內(nèi)容編輯信息。當(dāng)修改組件內(nèi)容時，在畫布中可以實時預(yù)覽組件的變化。

npm?install?vue-draggable-next
//or
yarn?add?vue-draggable-next

模板代碼：

<template>
??<div?style="display:?flex;cursor:?pointer;">
????<!--?組件列表?左側(cè)?-->
????<div?style="width:30vw;padding:30px;height:300px;border:?1px?solid?#000;text-align:?center">
??????<h1>組件列表</h1>
??????<VueDraggableNext?:list="componentNameList"?:group="{?name:?'people',?pull:?'clone',?put:?false?}"?:sort="false">
????????<div?v-for="element?in?componentNameList"?:key="element.name">
??????????<div?style="padding:?10px;background:?#ccc;margin-bottom:?10px">
????????????<el-button>?{{?element.name?}}</el-button>
??????????</div>
????????</div>
??????</VueDraggableNext>
????</div>

????<!--?預(yù)覽畫布?中間?-->
????<div?style="width:30vw;padding:30px;height:300px;border:?1px?solid?#000;text-align:?center">
??????<h1>預(yù)覽畫布</h1>
??????<VueDraggableNext?:list="componentList"?group="people"?:sort="false">
????????<div?v-for="(element,?index)?in?componentList"?:key="element.name">
??????????<div>
????????????<el-button?@click="changeComponent(element)"?size="small">編輯</el-button>
????????????<el-button?@click="deleteComponent(index)"?size="small">刪除</el-button>
??????????</div>
??????????<component?:is="element.component"?:details="element.details"></component>
????????</div>
??????</VueDraggableNext>
????</div>

????<!--?內(nèi)容編輯?右側(cè)?-->
????<div?style="width:30vw;padding:30px;height:300px;border:?1px?solid?#000;text-align:?center">
??????<h1>內(nèi)容編輯</h1>
??????<div?v-for="(nowDetails,?index)?in?nowComponentDetail.details"?:key="index">
????????{{?nowDetails.key?}}:?<el-input?clearable?v-model="nowDetails.value"?/>
??????</div>
????</div>
??</div>
??
</template>

<script?setup>
import?{markRaw,?reactive,?ref,?watch,?nextTick}?from?"vue";
//?引入需要拖拽的組件
import?About?from?"@/views/AboutView.vue"
//?引入拖拽庫
import?{?VueDraggableNext?}?from?"vue-draggable-next";

//?組件列表數(shù)據(jù)
const?componentNameList?=?[
??{
????//?組件ID
????componentId:0,
????//?組件名
????name:'關(guān)于組件',
????//?組件描述
????description:?'關(guān)于組件',
????//?組件信息
????component:?markRaw(About),
????//?組件需要編輯內(nèi)容
????details:?About.props.details.default
??},
??{
????componentId:1,
????name:'關(guān)于組件1',
????description:?'關(guān)于組件1',
????component:markRaw(About),
????details:?About.props.details.default
??},
];


//?預(yù)覽畫布數(shù)據(jù)
let?componentList?=?reactive([]);

watch(componentList,?()?=>?{
??console.log(componentList,?'componentList')
})



//?畫布中刪除的點擊事件
const?deleteComponent?=?(index)?=>?{
??componentList.splice(index,?1);
};

//?內(nèi)容編輯數(shù)據(jù)
let?nowComponentDetail?=?ref({});

//?畫布中編輯的點擊事件
const?changeComponent?=?(element)?=>?{
????nowComponentDetail.value?=?element;
};
</script>

//?獲取拖拽元素
const?draggableElement?=?document.getElementById('draggable');

//?記錄拖拽起始位置和拖拽元素的初始位置
let?startX,?startY,?initialX,?initialY;

//?監(jiān)聽鼠標(biāo)按下事件
draggableElement.addEventListener('mousedown',?dragStart);
draggableElement.addEventListener('touchstart',?dragStart);

//?監(jiān)聽鼠標(biāo)移動事件
document.addEventListener('mousemove',?drag);
document.addEventListener('touchmove',?drag);

//?監(jiān)聽鼠標(biāo)釋放事件
document.addEventListener('mouseup',?dragEnd);
document.addEventListener('touchend',?dragEnd);

//?拖拽開始事件處理程序
function?dragStart(event)?{
??event.preventDefault();

??if?(event.type?===?'touchstart')?{
????startX?=?event.touches[0].clientX;
????startY?=?event.touches[0].clientY;
??}?else?{
????startX?=?event.clientX;
????startY?=?event.clientY;
??}

??initialX?=?draggableElement.offsetLeft;
??initialY?=?draggableElement.offsetTop;
}

//?拖拽事件處理程序
function?drag(event)?{
??event.preventDefault();

??if?(event.type?===?'touchmove')?{
????const?currentX?=?event.touches[0].clientX?-?startX;
????const?currentY?=?event.touches[0].clientY?-?startY;
????draggableElement.style.left?=?initialX?+?currentX?+?'px';
????draggableElement.style.top?=?initialY?+?currentY?+?'px';
??}?else?{
????const?currentX?=?event.clientX?-?startX;
????const?currentY?=?event.clientY?-?startY;
????draggableElement.style.left?=?initialX?+?currentX?+?'px';
????draggableElement.style.top?=?initialY?+?currentY?+?'px';
??}
}

//?拖拽結(jié)束事件處理程序
function?dragEnd()?{
??//?執(zhí)行拖拽結(jié)束后的操作
}

3.2?關(guān)于vue-draggable-next?庫的功能總結(jié)

?

vue-draggable-next?庫特點和功能的補充說明：

• 基于 Vue 3：vue-draggable-next?是為 Vue.js 3 版本設(shè)計的拖拽庫，充分利用了 Vue 3 的響應(yīng)式系統(tǒng)和組合式 API。
• 輕量級和簡單易用：該庫的代碼量較少，易于理解和使用。它提供了一組簡單的指令和組件，可以輕松地將拖拽功能集成到 Vue.js 應(yīng)用程序中。
• 支持多種拖拽模式：vue-draggable-next?支持多種拖拽模式，包括自由拖拽、列表拖拽、網(wǎng)格拖拽等。您可以根據(jù)需求選擇適合的拖拽模式。
• 自定義拖拽樣式和行為：該庫允許您自定義拖拽元素的樣式和行為。您可以定義拖拽時的樣式、占位符元素、限制拖拽的范圍等。
• 事件和回調(diào)支持：vue-draggable-next?提供了一組事件和回調(diào)函數(shù)，可以在拖拽過程中監(jiān)聽和處理各種事件。例如，您可以監(jiān)聽拖拽開始、拖拽結(jié)束、拖拽元素排序等事件，并執(zhí)行相應(yīng)的操作。
• 支持觸摸設(shè)備：該庫對觸摸設(shè)備提供了良好的支持，可以在移動設(shè)備上實現(xiàn)流暢的拖拽交互。