Idea: Support for multiple roots to do away with the container element

[carsomyr]

Since Vue 3 is known for supporting templates with multiple roots, is the library refactorable into something that doesn't insist on a container element? In particular, I'm looking at these lines of code in componentStructure.js as a starting point. Can it be rewritten to return an array of hyperscript renders which represent each array element, per the Vue 3 documentation?

I'm asking on behalf of my engineering team because we have a problem where an intervening container element messes with CSS grid semantics, which require grid cells to be direct descendants of the grid element.

Feel free to close if I'm misunderstanding something and this is not feasible.

[lianee]

You could use the <draggable> element as your grid container, something like:

<draggable :list="items" group="grid" item-key="id" class="grid-container">
  <template #item="{element}">
    <div class="grid-cell">{{ element }}</div>
  </template>
</draggable>```

[mgiraldo]

@lianee this won't work in our case because each draggable needs to have its own style which is based on the n-th item. currently we use the information available from the v-for like so:

<section
v-for="(item, index) in theItems"
:style="rowStyleForItem(item.id)"
>

the rowStyleForItem() method returns the grid-row for that specific item. is there a way to obtain this information in vue-draggable assuming the style has to be dynamically calculated?

[lianee]

@lianee this won't work in our case because each draggable needs to have its own style which is based on the n-th item. currently we use the information available from the v-for like so:

Without seeing a real code it is difficult to be sure, so I might be wrong but I guessed that the <draggable> item represents the grid container, and your <section> item the grid items, so I see no problem to have that in the #item slot (and no more v-for):

<draggable :list="theItems" group="grid" item-key="id" class="grid-container">
  <template #item="{element}">
    <section :style="rowStyleForItem(element.id)">{{ element }}</section>
  </template>
</draggable>

[mgiraldo]

no. the draggables are inside of a grid. imagine a tic-tac-toe where each square is a draggable. you can move (drag) a square up or down or left or right and you calculate the square's grid-row or grid-column based on some numbering system that's contained within each square.