angular-gridster2: Item follows mouse pointer and gridster crashes

Hi, in my application I have implemented the gridster. The issue is that after some time dragging arround an item it is binded to the mouse pointer. I have created a gif which Shows the behaviour: bug As you can see on every mouse drag Event I am previously getting an

‘Unable to preventDefault inside passive event listener invocation.’

in gridsterDraggable.sevice.js in line 49 ,80 and 101. After some time the gridster then crashes at all. With the Errors: 1.

Unaught TypeError: Cannot read property ‘x’ of undefined at GridsterDraggable.calculateItemPosition (gridsterDraggable.service.js:173) at GridsterDraggable.calculateItemPositionFromMousePosition (gridsterDraggable.service.js:91) at GridsterDraggable.dragMove (gridsterDraggable.service.js:85) at HTMLDocument.eval (platform-browser.js:2628) at HTMLDocument.globalListener

and

Uncaught (in promise): TypeError: Cannot read property ‘setPushedItems’ of undefined TypeError: Cannot read property ‘setPushedItems’ of undefined at GridsterDraggable.makeDrag (gridsterDraggable.service.js:147) at ZoneDelegate.invoke (zone.js:388) at Object.onInvoke (core.js:4760) at ZoneDelegate.invoke (zone.js:387) at Zone.run (zone.js:138) at eval (zone.js:872) at ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4751) at ZoneDelegate.invokeTask (zone.js:420) at Zone.runTask (zone.js:188) at GridsterDraggable.makeDrag (gridsterDraggable.service.js:147) at ZoneDelegate.invoke (zone.js:388) at Object.onInvoke (core.js:4760) at ZoneDelegate.invoke (zone.js:387) at Zone.run (zone.js:138) at eval (zone.js:872) at ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4751) at ZoneDelegate.invokeTask (zone.js:420) at Zone.runTask (zone.js:188) at resolvePromise (zone.js:814) at eval (zone.js:877) at ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4751) at ZoneDelegate.invokeTask (zone.js:420) at Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595) at ZoneTask.invokeTask [as invoke] (zone.js:500) at invokeTask (zone.js:1540) at HTMLDocument.globalZoneAwareCallback (zone.js:1566)

For the gridster Options I have the following:

this.options = {
          gridType: GridType.Fit,
          itemChangeCallback: DisplayWidgetsComponent.itemChange,
          itemResizeCallback: DisplayWidgetsComponent.itemResize,

          compactType: CompactType.None,
          margin: 1,
          outerMargin: false,
          minCols: 80,
          maxCols: 130,
          minRows: 50,
          maxRows: 100,
          displayGrid: 'always',
          draggable: {
            delayStart: 0,
            enabled: true,
            ignoreContentClass: 'gridster-item-content',
            ignoreContent: false,
            dragHandleClass: 'drag-handler',
            stop: function ($event) {
            }
          },
          resizable: {
            enabled: true
          }
        };

and my HTML Looks like this:

<gridster [options]="options" class="widget-container">
        <gridster-item  *ngFor="let widget of widgets" [item]="widget.position" class="drag-handler" style="background: green">
          <div class="gridster-item-content">Hello</div>
        </gridster-item>
</gridster>

I am using Angular Version 5.2.11 gridster Version 5.3.3 I even tried to use the Options whih are defined on he example site from gridster but that made no difference. Always the same issue. Does anybody knows where the issue is coming from and how to solve or prevent it? Thanks in advance.

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 17

Most upvoted comments

Thanks. I have this working now without issues. Should apply to iframes as well. Below is what I ended up doing. i set pointer-events to none in both resize and change callback and then set to initial on mouseup event of gridster-item.

itemChange(item: GridsterItem, itemComponent: GridsterItemComponentInterface) {
var el = document.getElementById(item.inputs.widgetId); // el.style.pointerEvents = ‘none’; }

itemResize(item: GridsterItem, itemComponent: GridsterItemComponentInterface) { var el = document.getElementById(item.inputs.widgetId); el.style.pointerEvents = ‘none’; }

enablePointer(widgteId: string) { var el = document.getElementById(widgteId); el.style.pointerEvents = ‘initial’; }

<gridster-item [item]=“item” *ngFor=“let item of gridsterItemArray” (mouseup)=“enablePointer(item.inputs.widgetId)”>

kunal105 on Aug 31, 2018

yeah same here. the issue does not seem to be fixed.

To reproduce Please go here https://portal.tradingwidgets.com/ Open Chrome Developer tools. This happens more when developer tools is open. Move around the widget “technical analysis” on bottom right corner of dashboard. The issue is random but you should be able to reproduce if you move around some of the graphical widgets on this dashboard. you can use the hand tool to do that.

This happens more when there are many widgets and you are trying to move a widget over other widgets and then mouse gets stuck with the widget and only way out is to refresh page. You cannot even put it back in the same place as before.

kunal105 on Aug 26, 2018