need:
There are three elements overlapped and displayed on different layers. Click the Move Up button to move the selected element up one layer. Click Move Up twice to move up two layers. Click the Move Down button to move the selected element down. a layer. Implemented using vue3syntax.
Idea:
After selecting the element, click Move Up or Move Down, which means swapping the z-index values of the two layers. Assume that the selected element z-indexis 3, click to move down, the value will be reduced by one, and the z-index will become 2. Then find the element with a z-index value of 2 (note that the selected element must be removed here), and give this element Add 1 to the z-index, and the two layers are replaced.
accomplish:
<template>
<div class="canvas_box">
<div class="portrait_url">
<!-- 图层1 -->
<Vue3DraggableResizable @mousedown="activateComponent(0)" :style="{ zIndex: indexNum[0] }">
<img
style="width: 200px; height: 90px"
src="https://s3.cn-northwest-1.amazonaws.com.cn/yinlulu-glint/upload/01f4d5d0-ef4f-460e-bc6f-35d67e720011.jpg"
/>
</Vue3DraggableResizable>
<!-- 图层2 -->
<Vue3DraggableResizable @mousedown="activateComponent(1)" :style="{ zIndex: indexNum[1] }">
<p>这是第二张插图</p>
</Vue3DraggableResizable>
<!-- 图层3 -->
<Vue3DraggableResizable @mousedown="activateComponent(2)" :style="{ zIndex: indexNum[2] }">
<p>这是标题</p>
</Vue3DraggableResizable>
</div>
</div>
<div style="width: 300px; margin-top: 20px; display: flex; justify-content: space-around">
<button @click="moveUp">上移</button>
<button @click="moveDown">下移</button>
<button @click="upTop">置顶</button>
<button @click="downBottom">置底</button>
</div>
</template>
<script setup>
import {
ref } from "vue";
let indexNum = ref([1, 2, 3]); //三个图层的层级值依次是1,2,3
const selectedLayer = ref(null); //选中元素的下标
// 选中的元素
function activateComponent(index) {
selectedLayer.value = index;
}
// 上移
function moveUp() {
if (indexNum.value[selectedLayer.value] >= 3) {
//如果已经是最高层，则不执行上移
return;
}
indexNum.value[selectedLayer.value]++;
indexNum.value.forEach((i, index) => {
if (selectedLayer.value == index) {
// 如果是自己，则return
return;
}
if (indexNum.value[selectedLayer.value] == i) {
indexNum.value[index]--;
}
});
}
// 下移
function moveDown() {
if (indexNum.value[selectedLayer.value] <= 1) {
//如果已经是最底层，则不执行下移
return;
}
indexNum.value[selectedLayer.value]--;
indexNum.value.forEach((i, index) => {
if (selectedLayer.value == index) {
return;
}
if (indexNum.value[selectedLayer.value] == i) {
indexNum.value[index]++;
}
});
}
// 置顶
function upTop() {
if (indexNum.value[selectedLayer.value] >= 3) {
//如果已经是最高层，则不执行置顶
return;
}
indexNum.value[selectedLayer.value] = 3;
indexNum.value.forEach((i, index) => {
if (selectedLayer.value == index || indexNum.value[index] == 1) {
return;
}
indexNum.value[index]--;
});
}
// 置底
function downBottom() {
if (indexNum.value[selectedLayer.value] <= 1) {
//如果已经是最底层，则不执行置底
return;
}
indexNum.value[selectedLayer.value] = 1;
indexNum.value.forEach((i, index) => {
if (selectedLayer.value == index || indexNum.value[index] == 3) {
return;
}
indexNum.value[index]++;
});
}
</script>
<style lang="scss" scoped>
// 操作的画布
.canvas_box {
width: 300px;
height: 533px;
border: 1px solid #000;
position: relative;
overflow: hidden;
.portrait_url {
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
p {
color: #000;
font-size: 22px;
}
}
}
</style>
Similar diagram:
Note: Components are used Vue3DraggableResizable, which is a vue3component library for dragging and scaling elements. For specific usage, please refer to my other blog: https://blog.csdn.net/qdm13209211861/article/details /129924960?spm=1001.2014.3001.5502