I want to break my page into three sections and be able to drag items between each section.
I'm using "vue": "^3.3.0",, "vuedraggable": "^4.1.0",, and "tailwindcss": "^3.2.4",
My code looks like this:
<template>
<div v-if="mounted">
<div class="grid grid-rows-3">
<div>
<PageSubHeader>Army Equipment</PageSubHeader>
<!-- draggable to go here -->
</div>
<div>
<PageSubHeader>Equipment stored in the city</PageSubHeader>
<div class="grid grid-cols-8">
<div class="flex">
<draggable class="bg-zinc-800 h-10 p-1" :list="selection.city" item-key="id">
<template #item="{ element }">
<EquipmentTile :item="element"/>
</template>
</draggable>
</div>
</div>
</div>
<div>
<PageSubHeader>Equipment to be sold</PageSubHeader>
<!-- draggable to go here -->
</div>
</div>
<div class="w-full bg-green-700 opacity-80 rounded-b-sm px-4 py-2">
Submit
</div>
</div>
</template>
I've put comments where I want to put the other areas where users can drop the items.
But the draggable list is not obeying the grid I set up (with Tailwind) and the elements are "escaping" from the parent and overflowing.
The items are draggable within the list, but I need them to be side-by-side and to make the parent div expand to take up more of the page. The idea is that you can drag and drop the items between the three sections.
How do I get these draggable items to appear in a grid in each section of the page?
