Tengo que hacer un cuadro redimensionable y arrastrable en un contenedor de cuadrícula. Tengo un problema con el cuadro de cambio de tamaño. Mi caja está en la celda de la cuadrícula y puede moverse en el contenedor de la cuadrícula. Puedo cambiar el tamaño, pero con ese cambio de tamaño, el tamaño de la celda está cambiando. Quiero cambiar el tamaño de las celdas de la cuadrícula. Y necesito hacer esto sin usar ninguna biblioteca.

Quiero algo como esto.

 <template> <div v-bind:class="dragAndDropContainerClass"> <div v-bind:class="dragAndDropItemClass" v-for="n in 256" :key="n" @drop="drop" @dragover="allowDrop" > <div v-if="n === 1" v-bind:class="itemClass" v-bind:id="boxId" draggable="true" @dragstart="drag" v-on:click="getParentClass" ></div> </div> </div> </template>

 .dragAndDropContainerClass:first-child { background-color: blue; } .dragAndDropContainer { height: 600px; width: 600px; border: 1px solid black; display: grid; gap: 1px; grid-template-rows: repeat(16, 1fr); grid-template-columns: repeat(16, 1fr); } .dragAndDropItem { text-align: center; background: red; /* resize: both; overflow: auto; */ } .item { content: ""; aspect-ratio: 1 / 1; background-color: blue; grid-column: 3 / span 2; grid-row: third-line / 4; overflow: auto; resize: both; }