话不多说,先看效果
盒子可拖拽效果
布局用的是 display: grid;
拖拽效果用的是 sortablejs
首先需要下载 sortablejs
npm install sortablejs --save
看一下代码吧, 哈哈
<template>
<div class="grid">
<HotCard class="HotCard grid-item-lm" />
<TextVue class="grid-div grid-item-lm" />
<TextVue class="grid-div grid-item-lm" />
<TextVue class="grid-div grid-item-lm" />
<TextVue class="grid-div grid-item-lm" />
<TextVue class="grid-div grid-item-lm" />
<TextVue class="grid-div grid-item-lm" />
<TextVue class="grid-div grid-item-lm" />
<TextVue class="grid-div grid-item-lm" />
<TextVue class="grid-div grid-item-lm" />
<TextVue class="grid-div grid-item-lm" />
<TextVue class="grid-div grid-item-lm" />
<TextVue class="grid-div grid-item-lm" />
<TextVue class="grid-div grid-item-lm" />
<TextVue class="grid-div grid-item-lm" />
<TextVue class="grid-div grid-item-lm" />
<TextVue class="grid-div grid-item-lm" />
<TextVue class="grid-div grid-item-lm" />
<TextVue class="grid-div grid-item-lm" />
<TextVue class="grid-div grid-item-lm" />
<TextVue class="grid-div grid-item-lm" />
<TextVue class="grid-div grid-item-lm" />
<TextVue class="grid-div grid-item-lm" />
<TextVue class="grid-div grid-item-lm" />
<TextVue class="grid-div grid-item-lm" />
<TextVue class="grid-div grid-item-lm" />
<DoubleBox class="grid-double grid-item-lm" />
<DoubleBox class="grid-double grid-item-lm" />
<DoubleBox class="grid-double grid-item-lm" />
<DoubleBox class="grid-double grid-item-lm" />
<DoubleBox class="grid-double grid-item-lm" />
<DoubleBox class="grid-double grid-item-lm" />
<!-- <DoubleBox class="grid-double grid-item-lm" /> -->
</div>
</template>
<script setup>
import { onMounted } from "vue";
import Sortable from "sortablejs";
import HotCard from "@/components/HotCard.vue";
import TextVue from "@/components/TextVue.vue";
import DoubleBox from "@/components/DoubleBox.vue";
//使用onMounted是因为要等到标签渲染完成后在querySelector才能获取到带有grid类名的div盒子,否则grid常量为null,报错。
onMounted(() => {
const grid = document.querySelector(".grid");
//sortable对象
new Sortable(grid, {
animation: 150,
handle: ".grid-item-lm", //对grid的子对象中,带有.grid-item启动拖拽效果
});
});
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.grid {
padding: 20px 10%;
display: grid;
justify-content: center;
align-items: center;
/* 声明列的高度 */
grid-template-columns: repeat(auto-fill, 75px);
/* 声明行的高度 */
grid-template-rows: repeat(auto-fill, 75px);
/* 声明行间距和列间距 */
grid-gap: 36px;
}
.HotCard {
/* 声明宽占4个小盒子 */
grid-column: span 4;
/* 声明高占2个小盒子 */
grid-row: span 2;
}
.grid-div {
/* 声明宽占4个小盒子 */
grid-column: span 1;
/* 声明高占2个小盒子 */
grid-row: span 1;
}
.grid-double {
grid-column: span 2;
grid-row: span 2;
}
</style>
里面的子盒子很简单,其实就是按照格子的整数倍去设置宽高就可以了,记得加上中间的空隙间距
看一下 @/components/TextVue.vue 文件
<template>
<div>
<div class="little-box">little-box</div>
</div>
</template>
<style scoped lang="less">
.little-box {
width: 75px;
height: 75px;
background-color: greenyellow;
}
</style>
和 @/components/DoubleBox.vue 文件
<template>
<div>
<div class="double-box">double-box</div>
</div>
</template>
<style scoped lang="less">
.double-box {
width: 186px;
height: 180px;
background-color: rgb(8, 48, 139);
}
</style>
不知道为什么,double-box的width不是75*2 + 30px, 需要加6px才刚好完美适配
代码已经展示了,有需要的朋友可以直接复制查看了
参考相关文档:
最强大的 CSS 布局 —— Grid 布局
sortable js grid example
SortableJS,一个简单的 JS 拖拽库
Sortable.js中文网 | 配置项