tiberiuzuld / angular-gridster2

Angular gridster 2
https://tiberiuzuld.github.io/angular-gridster2
MIT License
1.28k stars 376 forks source link

I want Drag And Drop on other grid #822

Open thefrcrazy opened 2 years ago

thefrcrazy commented 2 years ago

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.

2022-06-29 09-49-46

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);
  }
Vasanthvivi commented 2 years ago

If you are using two gridsters i think you have to maintain same configurations in both