search

Noction / vue-draggable-grid

https://noction.github.io/vue-draggable-grid/
93 stars 34 forks source link

add item into layout bottom won't update layout's height #1

Closed luluxia closed 2 years ago

luluxia commented 2 years ago

ezgif-5-db10f2255a

just like the gif, i added items, and the height of layout always 85px. i tried add these code in GridLayout.vue and it works, maybe can fix it.

watch(() => props.layout.length, () => {
  updateHeight()
})
melrose13-69 commented 2 years ago

Will be fix in next patch, ty for issue

melrose13-69 commented 2 years ago

Alright, how you add new items, need to calculate itemsPosition

ex:

const lastGridItem = this.layout[this.layout.length - 1] const newIndex = lastGridItem.i + 1 const { y, x } = lastGridItem const isFullLine = this.layout.filter(l => l.y === y).length === 4 // row lelngth const newY = isFullLine ? y + 3 : y const newX = isFullLine ? 0 : x + 3

const newGridItem = { x: newX, y: newY, w: 3, h: 3, index: newIndex }

this.layout.push(newGridItem)