angular-gridster2
angular-gridster2 copied to clipboard
I want Drag And Drop on other grid
Hello, I'm looking for a drag and drop from one grid to another, I can't find the solution, so I quickly made one with the 'getBoundingClientRect' and the 'draggable.stop' event for testing, but I can't find it its pretty and unnatural, so if you ever have a solution, or it will be an upcoming feature, thanks in advance for your help.
Code:
this.tables.push(
{
source: 'player',
coord: document.getElementById('player')?.getBoundingClientRect(),
},
{
source: 'bag',
coord: document.getElementById('bag')?.getBoundingClientRect(),
}
);
dragStop(item: any, gridsterItem: any, event: any) {
// console.log('dragstop', item, gridsterItem, event);
const source = this.onElement(event);
if (item.loc !== source && source !== undefined) {
// console.log('index', source);
let newItem = JSON.parse(JSON.stringify(item));
newItem.loc = source;
this.inventory[item.loc] = this.inventory[item.loc].filter((el: any) => el.label !== item.label);
this.inventory[source].push(newItem);
}
}
onElement(event: any) {
return this.tables.map((el:any) => {
// console.log('el', el.coord);
const x = event.clientX;
const y = event.clientY;
if (x >= el.coord.left && x < el.coord.right && y >= el.coord.top && y < el.coord.bottom) return el.source;
}).find((el:any) => el !== undefined);
}
If you are using two gridsters i think you have to maintain same configurations in both