数组拖拽上下排序左右交换
<template>
<Dialog title="卡片布局" width="1220px">
<div class="box">
<div>
<template v-for="(item ,index) in list" :key="index">
<div v-if="index < list.length / 2" :class="{active : 1==1}" @drop="drop($event, index)" @dragover="dragOver" draggable="true" @dragstart="dragStart($event, index)">
<img :src="getIcon(item.Name)">
<p>{{ item.Name }}</p>
<div>
<img src="./../../../assets/images/echart/icon_tuodong@2x.png">
</div>
</div>
</template>
</div>
<div>
<template v-for="(item ,index) in list" :key="index">
<div v-if="index >= list.length / 2" :class="{active : 1==1}" @drop="drop($event, index)" @dragover="dragOver" draggable="true" @dragstart="dragStart($event, index)">
<img :src="getIcon(item.Name)">
<p>{{ item.Name }}</p>
<div>
<img src="./../../../assets/images/echart/icon_tuodong@2x.png">
</div>
</div>
</template>
</div>
</div>
</Dialog>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import Dialog from "./dialog.vue";
import { GetShowedCardsList } from "./../../../api/charts/index.ts"
import icon_ss from "./../../../assets/images/echart/icon_ss@2x.png"
import icon_jsxl from "./../../../assets/images/echart/icon_jsxl@2x.png"
import icon_jsjl from "./../../../assets/images/echart/icon_jsjl@2x.png"
import icon_jsxb from "./../../../assets/images/echart/icon_jsxb@2x.png"
import icon_jszc from "./../../../assets/images/echart/icon_jszc@2x.png"
import icon_jsnl from "./../../../assets/images/echart/icon_jsnl@2x.png"
import icon_js from "./../../../assets/images/echart/icon_js@2x.png"
import icon_xsnj from "./../../../assets/images/echart/icon_xsnj@2x.png"
import cc from "./../../../assets/images/echart/c c@2x.png"
import icon_zyxs from "./../../../assets/images/echart/icon_zyxs@2x.png"
import { log } from 'console';
export default defineComponent({
components: {
Dialog
},
setup() {
let startIndex = "";
const dragStart = (event, index) => {
startIndex = index;
event.dataTransfer.setData("index", index);
}
const dragOver = (event) => {
event.preventDefault();
}
const drop = (event, index) => {
const tem = list.value[startIndex];
console.log(tem)
if((startIndex < list.value.length / 2 && index >= list.value.length / 2) || (index < list.value.length / 2 && startIndex >= list.value.length / 2)) {
console.log("@2222222222222222222")
list.value[startIndex] = list.value[index]
list.value[index] = tem;
}else{
list.value.splice(startIndex, 1)
if(startIndex < index) {
if(event.offsetY < 52) {
console.log("上面")
list.value.splice((index - 1 < 0 ? 0 : index - 1), 0 ,tem)
}else{
console.log("下面")
list.value.splice(index, 0 ,tem)
}
}else{
if(event.offsetY < 52) {
console.log("上面")
list.value.splice(index, 0 ,tem)
}else{
console.log("下面")
list.value.splice(index + 1, 0 ,tem)
}
}
}
}
const data = {
id: 1
}
const list = ref([]);
GetShowedCardsList(data).then(res => {
if(res.success) {
list.value = res.result;
}
})
const getIcon = (name) => {
let str = "";
switch(name) {
case "师生数量" :
str = icon_ss;
break;
case "教师学历分布情况" :
str = icon_jsxl
break;
case "教师教龄分布情况" :
str = icon_jsjl
break;
case "教师性别分布情况" :
str = icon_jsxb
break;
case "教师教龄分布（年级）" :
str = icon_jsnl
break;
case "教师职称分布（年级）" :
str = icon_jszc
break;
case "教师职称分布" :
str = icon_js
break;
case "师生应用活跃情况" :
str = icon_ss
break;
case "学生年级应用分布" :
str = icon_xsnj
break;
case "作业-已采集题目数" :
str = cc
break;
case "作业-已采集学生数" :
str = icon_zyxs
break;
}
return str;
}
return {
dragStart,
dragOver,
drop,
getIcon,
list
};
},
});
</script>
<style lang="scss" scoped>
.box {
max-height: 70vh;
overflow: auto;
padding-top: 24px;
padding-left: 24px;
>div {
width: 574px;
margin-right: 24px;
box-sizing: border-box;
float: left;
>div {
height: 104px;
padding: 0 32px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
margin-bottom: 20px;
cursor: pointer;
>img:nth-of-type(1) {
width: 62px;
height:62px;
}
p {
margin-left: 23px;
font-size: 20px;
font-weight: 600;
color: #FFFFFF;
flex: 1;
}
>div {
width: 40px;
height: 40px;
img:nth-of-type(1) {
width: 40px;
height: 40px;
}
}
}
>div:nth-of-type(2n) {
margin-right: 0;
}
>div:after {
width: 100%;
height: 100%;
position: absolute;
background: url("./../../../assets/images/echart/card_bg_default@2x.png");
background-size: 100% 100%;
left: 0;
top: 0;
content: "";
opacity: .8;
}
.active:after {
background: url("./../../../assets/images/echart/card_bg_selected@2x.png");
background-size: 100% 100%;
opacity: 1;
}
}
>div:nth-of-type(2) {
margin-right: 0;
}
}
</style>
