search

ManifestWebDesign / angular-gridster

An implementation of gridster-like widgets for Angular JS
http://manifestwebdesign.github.io/angular-gridster/
MIT License
964 stars 394 forks source link

gridster items are getting overlapped on each other when added to dashboard (version : "0.13.5") #387

Open SwapnaLReddy0405 opened 8 years ago

SwapnaLReddy0405 commented 8 years ago

gridster items are getting overlapped on each other when added to dashboard. (This issue is similar to "Resizing widget beyond boundaries causes overlap #91" bug, but caused while adding widgets to dashboard)

ironsides24 commented 8 years ago

I am just now noticing the same behavior. If you save the dashboard and then refresh it fixes itself but this is not an accepted work around

BaTbAbYDeV commented 7 years ago

I think this is linked to the problem described here https://github.com/ManifestWebDesign/angular-gridster/issues/304

(hope that helps)

isaacpaquette commented 6 years ago

Any word on a fix for this issue? We are seeing the problem as well. Thanks!

joepwijers commented 1 year ago

Of course this an amazingly old issue and possibly nobody is using this anymore, and switched to newer implementations

But I had this problem and found a cause (on version 0.7 or 0.8 of the pre-angular vesion for JQuery still)

The simplest reproduction steps for me were for a simple regular grid filled with items of size 1x1 cells: STEP1: move the top left widget at (1,1) to the 2nd column gridster will swap the 2 widgets which is fine STEP2: move the widget om the second row below (1,1) into (1,1) gridster will let the dragged widget land on top of the widget that was already in (1,1) So they overlap, which is not what we want.

Cause

As a cause I found that in STEP 1, in on_stop_drag there is code that will clear in the gridmap the cell(s) the dragged item left behind. This seems OK when it left behind an empty spot. But since in STEP 1 another widget was swapped into that spot, it is not OK now. Because then gridster no long knows that this spot is NOT empty And as a result in STEP 2, it will treat it as empty, and place the dragged widget on top of the other one.

Fix for my scenario

For my particular use case it was enough to add an extra condition before marking the spot as empty. The extra condition is to check that the spot that it is about to mark as empty is currently marked as occupied by the $player. Only then it will clean the spot. OLD:

if (grid.col !== this.placeholder_grid_data.col || grid.row !== this.placeholder_grid_data.row) {
    this.update_widget_position(grid, false);

NEW

if (this.$player[0] == this.gridmap[grid.col][grid.row] &&
   (grid.col !== this.placeholder_grid_data.col || grid.row !== this.placeholder_grid_data.row)) {
    this.update_widget_position(grid, false);

As I said it was good enough for my use case. This is because after dragging ends I anyway apply an additional algorithm, and I just needed to avoid the visually weird behavior of the overlap while dragging. When not applying my additional code. I did still see some other odd behaviors after that when I did not apply my additional algorithm. E.g. new dragged items would swap with widgets that were not really their neighboring widget And I do not know whether these are side effects of my "fix", or other issues.

Since my own problem is covered, I leave it at this. Maybe above analysis will help someone to really resolve it