Groups

Using group-id

You can associate different vuuri grids together by assigning them to a group-id. By doing so, you can freely drag and drop their grid elements to each other.

Simply assign the grids with the same group-id:

<template>
  <div>
    <vuuri>
      v-model="todoItems"
      group-id="kanbanboard"
      drag-enabled
    </vuuri>
    <vuuri>
      v-model="doneItems"
      group-id="kanbanboard"
      drag-enabled
    </vuuri>    
  </div>
</template>

Using group-ids

You can also make use of group-ids. Same principle, but you can associate a vuuri grid to a group of grids to share grid elements.

<template>
  <div>
    <vuuri>
      v-model="todoItems"
      :group-ids="['grid_a', 'grid_c']"
      drag-enabled
    </vuuri>
    <vuuri>
      v-model="doneItems"
      :group-ids="['grid_b', 'grid_d']"
      drag-enabled
    </vuuri>
    <vuuri>
      v-model="doneItems"
      :group-ids="['grid_c', 'grid_d']"
      drag-enabled
    </vuuri>        
  </div>
</template>

In the above example, grid_a and grid_b are able to freely drag their items to grid_c, but grid_a can't drag it items to grid_b and vice versa. This was achieved by adding a fourth group (grid_d) because this is needed if you want to exclude other groups.

Schema:

grid_a -> grid_c

grid_b -> grid_c

Go check out the KanBan Demo example.