Deleting a widget (GridsterItem) leaves a gridster-preview behind

Describe the bug

Deleting a widget (GridsterItem):

  public onDelete(item) {

    this.items.splice(this.items.indexOf(item), 1);
  }

See: dashboard.component.ts

Leaves a gridster-preview behind:

Demo

Firebase Hosting: Serendipity

[tiberiuzuld]

Hello, There is already an option to delay the drag. But another simple option is to take the event on the button and call stopPropagation() And the binding in html is on mousedown instead of click since the drag is bound to mousedown also. You can see that in the demo app I do the same thing here: https://github.com/tiberiuzuld/angular-gridster2/blob/master/src/app/sections/home/home.component.ts#L92

[eestein]

Alright, so I’ve figured it out. When I clicked on my custom delete button the mousedown on gridster item was triggered, and thereafter the drag process started. Since on that process, I (and I’m assuming all of you as well) would correctly remove the item from the array of items, gridster didn’t know the process was finished, because it was never “released”.

The solution was pretty simple, I remove my item from within a settimeout:

setTimeout(() => {
    this.dashboardService.removeCard(card);
}, 0);

Now it’s working properly, with no “left over” elements. Though it should be said that fixing this behavior, by maybe adding a delay to start the drag, would be the best solution.