一. 安装依赖包
npm i -S vuedraggable
二. 使用
import draggable from 'vuedraggable'
三. 在Html中使用方式
<ul>
<draggable
:list="sourceList"
tag="div"
animation="500"
group="pk"
@end="datadragEnd"
>
<transition-group>
<li v-for="(item,index) in sourceList" :key="index">
<!-- 备课包 -->
<div v-if="item.sourceType === 'pk'">
<source-type-pk
:id="renameId"
:item="item"
@end="datadragEnd"
@rename="renameTick"
@delete="clickDelete"
@uploding="clickUpLoading"
@add="clickAddLinks"
@move="moveTo"
/>
</div>
<!-- 资源 -->
<div v-if="item.sourceType === 'tp' || item.sourceType === 'qs' || item.sourceType === 'se'">
<source-other-type
:id="renameId"
:item="item"
@rename="renameTick"
@delete="clickSingleDelete"
@move="moveTo"
/>
</div>
<!-- 链接 -->
<div v-if="item.sourceType === 'lk'">
<source-type-lk
:id="renameId"
:item="item"
@rename="renameTick"
@delete="clickSingleDelete"
@move="moveTo"
/>
</div>
</li>
</transition-group>
</draggable>
</ul>
四. 顺便记录一下我在end事件中处理的数据
传给后端的数据类型
{
"bookId": 0,
"chapterId": 0,
"knobbleId": 0,
"parentSourceForms": [ // 外层
{
"child": [ // 若资源包中有数据传,没有传空
{
"sourceId": 0,
"sourceType": ""
}
],
"sourceId": 0,
"sourceType": ""
}
],
"sectionId": 0
}
下面是我处理的数据(在end事件中可以直接拿到改变后的数据)
datadragEnd() {
this.parsSourceData(this.sourceList)
// 数据处理好,课调用接口在这边
},
因为数据处理的代码有点多,所以这边重新定义一个函数
parsSourceData(data) {
const parentSourceForms = []
data.forEach(item => {
if (item.lval.length > 0) {
item.lval.forEach(lval => {
parentSourceForms.push({ child: [{ sourceId: lval.sourceId, sourceType: lval.sourceType }], sourceId: item.sourceId, sourceType: item.sourceType })
})
} else {
parentSourceForms.push({ child: [], sourceId: item.sourceId, sourceType: item.sourceType })
}
})
var beforeData = parentSourceForms // 将dataArr赋值给beforeData 也可直接操作dataArr
const tempArr = []
const afterData = []// 新数组
for (let i = 0; i < beforeData.length; i++) {
if (tempArr.indexOf(beforeData[i].sourceId) === -1) {
afterData.push({
sourceId: beforeData[i].sourceId,
sourceType: beforeData[i].sourceType,
child: beforeData[i].child
})
tempArr.push(beforeData[i].sourceId)
} else {
for (let j = 0; j < afterData.length; j++) {
if (afterData[j].sourceId === beforeData[i].sourceId) {
const childArr = [... beforeData[i].child]
afterData[j].child = afterData[j].child.concat(childArr)
break
}
}
}
}
this.parentSourceForms = afterData
},
五. 实现拖拽的效果
提示:
事件end是在拖拽后得到数据新的排序好的顺序,可在次事件中调用接口和处理数据。因为我的项目是文件的格式,所以文件夹中的内容可以拖出和拖入,这时候就用到draggable中重要的属性group(若是将想要互相拖拽内容,就将group命名一样)
文档:vuedraggable - npm
可实现的功能:vuedraggable