How can you drag between 2 'grids' in angular-gridster2?

Question

I am using the following: https://github.com/tiberiuzuld/angular-gridster2

I want to be able to instantiate two grids with different 'ids' on the same page, grid1 and grid2. Is it possible to drag one box from grid1 and drop it into grid2?

If so, how? If not, are there other similar libraries for angular2/4 that support this?

Mcmullen

Answer 1

Question 1: Is it possible to drag one box from grid1 and drop it into grid2?
Answer: Sadly there is no such functionality available right now. Please have a look at this thread. https://github.com/tiberiuzuld/angular-gridster2/issues/245

Question 2: Are there other similar libraries for angular2/4 that support this?
Answer: Not sure about similar libraries implemented in Angular. However, I personally like gridstack.js https://github.com/gridstack/gridstack.js

Mobile-friendly modern Typescript library for dashboard layout and creation. Making a drag-and-drop, multi-column responsive dashboard has never been easier. Has multiple bindings and works great with React, Vue, Angular, Knockout.js, Ember, and others (see frameworks section).

It supports the functionality that you needed. https://gridstackjs.com/demo/two.html

There is no angular wrapper available for it. But you can directly use it in your angular project. To get you started I have also prepared one small stackblitz demo using gridstack.js with multiple grids.

Demo: https://stackblitz.com/edit/angular-ivy-mlnqah?file=src/app/gridstack/gridstack.component.ts

Sack