<template>
<div class="videoBox">
<div class="mr20">
<div v-for="(item, index) in videoList" :key="index">
<div v-if="item.drag" class="name" @dragstart="dragstart(item)" draggable="true">{{ item.name }}</div>
<div v-else class="unName" draggable="false">{{ item.name }}</div>
</div>
</div>
<div draggable="false" class="content" @dragenter="ondragenter($event)" @dragover="ondragover($event)" @drop="ondrop($event, dragstartItem)">
<div v-for="(item, index) in boxList" :key="index" class="conBox" :draggable="true" @dragstart="sonDragstart(item)" @dragenter="sonDragenter(item)" @dragend="sonDragend(item)">
<div class="conTit">
<span>{{ item.name }}</span>
<div class="icon" @click="del(index)">
<i class="el-icon-circle-close"></i>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "",
components: {},
props: {},
data() {
return {
videoList: [
{
name: "01",
drag: true,
url: '@/assets/PV.mp4'
},
{
name: "02",
drag: true,
url: '../assets/PV.mp4'
},
{
name: "03",
drag: true,
url: require('@/assets/PV.mp4')
},
{
name: "04",
drag: true,
url: require('../assets/PV.mp4')
},
],
boxList: [],
dragstartItem: {},
moveVal: ''
};
},
filters: {},
computed: {},
watch: {},
created() {},
mounted() {},
beforeDestroy() {},
methods: {
// 数据开始拖动
dragstart(item) {
item.sort = false // 判断是排序还是新增
this.dragstartItem = JSON.parse(JSON.stringify(item)) // 获取列表中拖动的数据
},
// 鼠标进入当前dom
ondragenter(e) {
e = e || event;
if (e.preventDefault){
e.preventDefault();
} else {
e.returnValue = false;
}
},
// 鼠标在当前dom中移动
ondragover(e) {
e = e || event;
if (e.preventDefault){
e.preventDefault();
} else {
e.returnValue = false;
}
},
// 拖动放下
ondrop(e, val) {
if (JSON.stringify(val) !== '{}' && !val.sort) {
val.sort = false
this.boxList.push(val)
this.dragstartItem = {}
}
},
// 排序拖拽开始
sonDragstart(item) {
item.sort = true
if (this.boxList.length > 0) {
this.boxList.forEach(items => {
items.sort = true
})
}
},
// 排序进入拖放区域
sonDragenter(item) {
this.moveVal = item;
},
// 拖拽结束排序
sonDragend(item) {
if (item.sort) {
item.sort = false
let moveObj = this.moveVal ? this.moveVal : '';
let index = this.boxList.indexOf(item); // 移动元素的当前位置
let addIndex = this.boxList.indexOf(moveObj); // 要移动后的位置
this.boxList.splice(index, 1);
this.boxList.splice(addIndex, 0, item);
this.moveVal = ''
}
},
// 删除
del(index) {
this.boxList.splice(index, 1);
}
},
};
</script>
<style scoped lang="less">
.videoBox {
display: flex;
padding: 20px;
.name {
width: 100px;
padding: 10px;
margin: 10px 0;
border: 1px solid #1f88d9;
color: #1f88d9;
background: #fff;
cursor: move;
user-select: none;
}
.unName {
width: 100px;
padding: 10px;
margin: 10px 0;
background: #ccc;
user-select: none;
}
.content {
width: 400px;
height: 200px;
border: 1px solid #000;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-content: space-around;
.conBox {
width: 49%;
height: 48%;
background: #ccc;
display: flex;
justify-content: center;
align-items: center;
position: relative;
.conTit {
width: 100%;
height: 100%;
.icon {
position: absolute;
top: 0px;
right: 0px;
cursor: pointer;
}
}
}
}
.mr20 {
margin-right: 20px;
}
}
</style>
vue 原生drag拖动元素与拖动排序
最新推荐文章于 2024-03-29 15:52:30 发布