vue3项目使用grid布局和sortablejs实现拖拽效果

话不多说，先看效果

盒子可拖拽效果

grid布局
grid布局样式
布局用的是 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才刚好完美适配
代码已经展示了，有需要的朋友可以直接复制查看了

vue3项目使用grid布局和sortablejs实现拖拽效果

猜你喜欢