拖拽区域代码
<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-if="JSON.stringify(item) == '{}'">
<i class="el-icon-plus"></i>
</div>
<div class="content" v-else style="cursor: pointer;">
<!-- <img src="../../assets/img/image/newanli.png" alt=""> -->
<img :src="getImageUrl(item)" alt="">
<p> {{ item.title }}</p>
</div>
<span v-if="JSON.stringify(item) !== '{}'" style="cursor: pointer;" class="circle" @click="deleteTemp(item, index)"><i class="el-icon-minus"
style="color: #ffffff;"></i></span>
</div>
<div class="copy_main">
<draggable :list="CourseCustom" :group="{ name: 'resources', }" style="">
<div class="module-item" style="" v-for="(item, index) in CourseCustom" :key="index">
<!-- <span style="color: #ffffff; width: 10px;margin-left:10px;display: block;">{{ index+1 }}</span> -->
<div class="no_content" v-if="JSON.stringify(item) == '{}'">
<!-- <i class="el-icon-plus"></i> -->
</div>
<div class="content" v-else style="cursor: pointer;">
</div>
<span v-if="JSON.stringify(item) !== '{}'" style="background-color: transparent; cursor: pointer;" class="circle"
@click="deleteTemp(item, index)"></span>
</div>
</draggable>
</div>
</div>
</el-scrollbar>
<div class="footer">
<div class="footer-box">
<el-popover placement="top-start" width="280" trigger="click" popper-class="modul-yt-popver"
style="background: #333333;">
<el-scrollbar>
<div class="modulList">
<div class="popover-item" :class="{'active-popover-item':activePopoverIndex==index}" v-for="(item,index) in courseTempList">
<div class="moudle_name" style="cursor: pointer;" @click="selectTempClick(item,index)">{{ item.name }}</div>
<i class="iconfont" style="cursor: pointer;" @click.stop="deleTemp(item.id)"></i>
</div>
<div v-if="courseTempList.length === 0"
style="text-align: center; width:100%; padding-top: 100px;box-sizing: border-box;">暂无模板
</div>
</div>
</el-scrollbar>
<div class="footer_btn" slot="reference" style="color: #006EFF;cursor: pointer;">选择</div>
</el-popover>
<div class=" footer_btn footer_btn1" @click="saveTempListDialog()">保存</div>
<div class=" footer_btn footer_btn1" @click="saveCourseTemp()">应用</div>
</div>
</div>
<el-dialog title="保存模板" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
<div class="modul_name">
<!-- <span></span>
<span>模板名称</span>
<el-input v-model="moduleName" placeholder="输入名称3-10字"></el-input> -->
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="模板名称" prop="moduleName">
<el-input v-model="ruleForm.moduleName" placeholder="输入名称3-10字"></el-input>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="saveTempList">确 定</el-button>
</span>
</el-dialog>
</div>
拖拽存放样式 这里面是有两层的 根据定位来写的 为什么这样写 是原来直接拖拽会有把其他元素向后挤压的一个过程 不是一个萝卜一个坑那样的 这样写算是走了一个捷径
安装导入注册三部曲
import draggable from "vuedraggable";
components: {
draggable
},
左侧的样式
.left {
width: 400px;
background: #2D2D2D;
height: 100%;
.header {
width: 100%;
height: 60px;
border-bottom: 1px solid #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 16px;
color: #FFFFFF;
line-height: 19px;
text-align: left;
font-style: normal;
text-transform: none;
}
::v-deep .el-scrollbar {
.el-scrollbar__wrap {
overflow-x: hidden;
.el-scrollbar__view {
// overflow-x: hidden;
}
}
}
.main {
width: 400px;
height: calc(100vh - 277px);
// background-color: pink;
// display: flex;
// flex-wrap: wrap;
padding-top: 30px;
box-sizing: border-box;
position: relative;
.module-item {
width: 400px;
height: 50px;
margin-bottom: 30px;
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
.no_content {
background: #2D2D2D;
border-radius: 4px 4px 4px 4px;
border: 1px solid #999999;
display: flex;
align-items: center;
justify-content: center;
color: #999999;
width: 300px;
height: 50px;
margin-left: 20px;
box-sizing: border-box;
}
.content {
width: 300px;
background: #424242;
border-radius: 4px 4px 4px 4px;
display: flex;
align-items: center;
padding: 10px;
color: #FFFFFF;
margin-left: 20px;
height: 50px;
box-sizing: border-box;
img {
width: 30px;
height: 30px;
}
p {
width: 260px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.circle {
display: block;
width: 20px;
height: 20px;
padding: 5px;
box-sizing: border-box;
border-radius: 20px;
background-color: red;
display: flex;
align-items: center;
justify-content: center;
margin-left: 14px;
}
}
}
.copy_main {
position: absolute;
background-color: transparent;
top: 0;
left: 0;
padding-top: 30px;
width: 340px;
// height: calc(100vh - 277px);
padding-left: 20px;
box-sizing: border-box;
.module-item {
width: 360px;
// background-color: pink;
background-color: transparent;
.content{
width: 303px;
background-color: transparent;
border: none;
}
.no_content{
width: 300px;
background-color: transparent;
border: none;
}
}
}
.footer {
width: 340px;
height: 80px;
background: #383838;
position: fixed;
bottom: 0;
left: 0;
.footer-box {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
.footer_btn {
width: 72px;
height: 30px;
background: #383838;
border-radius: 4px 4px 4px 4px;
border: 1px solid #006EFF;
display: flex;
align-items: center;
justify-content: center;
color: #006EFF;
cursor: pointer;
}
.footer_btn1 {
background: #006EFF;
color: #FFFFFF;
}
}
}
}
扫一扫
674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
