draggable 实现一个简单的拖拽

在这里插入图片描述
拖拽区域代码

<draggable v-if="activeFirstIndex !== 8" :list="showResourseList"
:group="{ name: 'resources', pull: 'clone', put: false }" :sort="false" :multiple="false"
:move="onMove1" @end="onEnd" class="dragg-box"><div v-for="item in showResourseList" class="item_box"><img :src="getImageUrl(item)" alt=""><p>{{ item.title }}</p></div><div v-if="showResourseList.length == 0" class="nodata"><img src="../../assets/teacherIcon/noDataye.png" alt=""><p> 暂无数据</p></div>
</draggable>

onMove1 onEnd 函数

   onMove1(evt) {let obj = evt.draggedContext.element//拖拽对象let objn = evt.relatedContext.element//目标对象// console.log("拖拽对象",obj);// console.log("目标对象",objn);let index = this.CourseCustom.findIndex(item => item.id == obj.id)if (index != -1) return false// console.log(evt.draggedContext.element,"移动中");//判断是否重复添加},onEnd(evt) {// console.log("添加之前",this.CourseCustom);// console.log(evt,"pppppppp");let newIndex = evt.newIndex;if (this.CourseCustom.length > 14) {if (this.CourseCustom[newIndex + 1].id) {this.CourseCustom.splice(newIndex, 1)} else {this.CourseCustom.splice(newIndex + 1, 1)}}// console.log("添加之后",this.CourseCustom);this.module_listArr = this.CourseCustom},

 <div class="left"><div class="header">模板生成</div><el-scrollbar><div class="main"><div class="module-item" style="" v-for="(item, index) in module_listArr" :key="index"><span style="color: #ffffff; width: 10px;margin-left:10px;display: block;">{{ index + 1 }}</span><div class="no_content" v