Items sometimes overlap after dragging item

[hannecolaers]

Hi,

we have an issue in our project that after dragging an item, it sometimes happens that items overlap each other. I've created a simple example to reproduce:

Thanks for looking into it!

[CollinGraf314]

Could you post the code you used to make that sample? Posting a stackblitz makes looking into these issues much easier.

[hannecolaers]

Here you go: https://stackblitz.com/edit/angular-6lsknr?file=src%2Fapp%2Fapp.component.ts

[tiberiuzuld]

Hi @hannecolaers , @CollinGraf314 , I tried to reproduce it in latest version but I couldn't. Anyway you can try to use the class gridster-item-content to fix this kind of issues.

[CollinGraf314]

This issue still exists in the latest version. Adding gridster-item-content does help, but if you highlight content with your cursor and then click and drag part of the gridster-item that does not have the gridster-item-content class, then you get the bug again. Interestingly the bug only occurs when you have the mouse moving when you begin your drag. If your mouse is stationary when you begin the drag then the bug does not occur.

Stackblitz: https://stackblitz.com/edit/angular-jstyvl gif:

Issue is coming from line 237 in the gridsterDraggable.service where lastPosition gets set to undefined by line 235.

[ashitanojoe]

I'm seeing this issue as well. It is actually fairly easy to reproduce on the demo site. https://tiberiuzuld.github.io/angular-gridster2/gridSizes

Set a fixed grid size by setting the min and max values for rows and cols to the same value. Then fill the grid up with items of varying size. Once full, quickly shuffle one of the smaller items around. It doesn't take long for some of the items to start overlapping.

[gethari]

@tiberiuzuld any update on this?

[JelleVisser]

We are running into this same issue with the following config config

    options: GridsterConfig = {
        gridType: GridType.Fit,
        displayGrid: DisplayGrid.Always,
        pushItems: true,
        draggable: {
            enabled: true,
            stop: this.gridsterDragStopHandler.bind(this)
        },
        resizable: {
            enabled: true,
            stop: this.gridsterResizeStopHandler.bind(this)
        },
        minCols: 2,
        maxCols: 2,
        minRows: 8,
        maxRows: 8,
        maxItemCols: 2,
        minItemCols: 1,
        maxItemRows: 2,
        minItemRows: 1,
        defaultItemCols: 1,
        defaultItemRows: 1,
        enableEmptyCellDrop: true,
        disableScrollHorizontal: true,
        disableScrollVertical: true,
        emptyCellDropCallback: this.gridsterDropHandler.bind(this)
    };