I have a grid container with cells and a draggable item in a Vue project. I am trying to figure out how to resize the box inside the grid component (refer to images).
https://i.stack.imgur.com/q4MKZ.png
This is my current grid setup, and I would like the box to resize based on the cells in the grid. Something similar to
https://i.stack.imgur.com/pCsNI.png
Specifically, I am looking for draggable border resizing functionality.
Below is the template code for this component in Vue:
<template>
<div v-bind:class="containerClass">
<div v-bind:class="addNewItemContainerClass">
<button>Add new box</button>
</div>
<div v-bind:class="drugAndDropContainerClass">
<div v-bind:class="drugAndDropClass">
<div
v-bind:class="dragAndDropItemClass"
v-for="n in 256"
:key="n"
@drop="drop"
@dragover="allowDrop"
>
<div
v-if="n === 1"
v-bind:class="boxClass"
v-bind:id="n"
draggable="true"
@dragstart="drag"
></div>
</div>
</div>
</div>
</div>
</template>
Here is the corresponding CSS style sheet:
.container {
height: 100vh;
width: fit-content;
}
.addNewItemContainer {
padding: 10px 5px;
border-bottom: black 1px solid;
}
.drugAndDropContainer {
background-color: #DAF0F7;
padding: 10px;
height: 100%;
}
.drugAndDrop {
display: grid;
gap: 10px;
grid-template-rows: repeat(16, 1fr);
grid-template-columns: repeat(16, 1fr);
height: 800px;
width: 800px;
}
.dragAndDropItem {
content: "";
background-color: #C8D9F0;
border-radius: 3px;
}
.box {
aspect-ratio: 1/1;
width: 99px;
background-color: white;
border-radius: 3px;
}