代码如下，需要自取
<div>
<transition-group class="container" name="sort">
<div
class="app-item"
v-for="(app, index) in customApps"
:key="app.name"
:draggable="true"
@dragstart="dragstart(app)"
@dragenter="dragenter(app, $event)"
@dragend="getDragend(customApps, 'customer', $event)"
>
<div>
<img class="icon_a" v-if="app.img" :src="app.img" />
<div class="ellipsis">{{ app.name }}</div>
</div>
</div>
</transition-group>
</div>
</template>
<!-- import { APi } from '@/api/enterpriseAPi' -->
<script>
export default {
data() {
return {
oldData: [],
newData: [],
customApps: [
{
name: "站网",
img: require("@/assets/fastImages/1zwC/13.png"),
address: "/baseinfo/Informationsecurity/stationmanage",
},
{
name: "文件管理 ",
img: require("@/assets/fastImages/1wjgl/41.png"),
address: "/baseinfo/Informationsecurity/fileManagement",
},
{
name: "设备",
img: require("@/assets/fastImages/1sbC/6.png"),
address: "/baseinfo/Informationsecurity/equipinfo/equipindex",
},
{
name: "水位",
img: require("@/assets/fastImages/1swC/15.png"),
address: "/exam/data-manage/realtime-water-level",
},
{
name: "测流",
img: require("@/assets/fastImages/1cl/43.png"),
address: "/exam/flow/flow-test-onLine",
},
{
name: "测沙",
img: require("@/assets/fastImages/1csC/16.png"),
address: "/exam/flow/flow-sand-onLine",
},
{
name: "雨量",
img: require("@/assets/fastImages/1ylC/18.png"),
address: "/exam/water/precipitation-automatic",
},
{
name: "摘录",
img: require("@/assets/fastImages/1zlC/19.png"),
address: "/exam/data-manage/extract/extractManage",
},
{
name: "校审",
img: require("@/assets/fastImages/1jsC/2.png"),
address: "/exam/mine/mine-examine",
},
{
name: "蒸发",
img: require("@/assets/fastImages/1zfC/4.png"),
address: "/exam/evaporation/evaporation-automatic",
},
{
name: "水温",
img: require("@/assets/fastImages/1sw2C/5.png"),
address: "/exam/data-manage/water-temperature",
},
{
name: "整编",
img: require("@/assets/fastImages/1zbC/9.png"),
address: "/manageAll/homePage",
},
{
name: "潮位",
img: require("@/assets/fastImages/1cwC/3.png"),
address: "/exam/sea-manage/realtime-sea-level",
},
{
name: "测验信息",
img: require("@/assets/fastImages/1cyC/12.png"),
address: "/exam/testBaseInfo/examBaseSet",
},
],
dragStartId: "",
dragEndId: "",
};
},
methods: {
dragstart(value) {
this.oldData = value;
this.dragStartId = value.id;
},
dragenter(value) {
this.newData = value;
this.dragEndId = value.id;
},
getDragend(listData, type) {
if (this.oldData !== this.newData) {
let oldIndex = listData.indexOf(this.oldData);
let newIndex = listData.indexOf(this.newData);
let newItems = [...listData];
// 删除之前DOM节点
newItems.splice(oldIndex, 1);
// 在拖拽结束目标位置增加新的DOM节点
newItems.splice(newIndex, 0, this.oldData);
// 每次拖拽结束后，将拖拽处理完成的数据，赋值原数组，使DOM视图更新，页面显示拖拽动画
this.customApps = newItems;
console.log("this.customApps", this.customApps);
// 每次拖拽结束后调用接口时时保存数据
// Api(this.dragStartId, this.dragEndId).then((res) => {});
}
},
},
};
</script>
<style scoped lang="scss">
.app-item {
border-radius: 10px;
background: #e0e0e0;
box-shadow: 14px 14px 24px #b5b5b5, -14px -14px 24px #ffffff;
float: left;
width: 96px;
height: 96px;
background-color: #f5f6fa;
margin: 10px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
transition-duration: 300ms;
.ellipsis {
text-align: center;
}
}
.app-item :hover {
/* margin-top: -20px; */
cursor: pointer;
}
</style>```
