Item follows mouse pointer and gridster crashes

[ChinaeduPascal]

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:

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.

[CollinGraf314]

Could you create a stackblitz with a minimal reproduction of the issue for me to play around with? Right now I have no clue what could cause this issue for you.

[ghost]

I am getting the same issue. it is random but happening often making it difficult to use. Mouse will stick to the widget while dragging and you cannot do anything to get out, The only option is refresh the page...I will see If I can reproduce this easily. Please let me know if this issue solved, I am 3 months into a project using angular gridster and we do not have an alternative option.

[ChinaeduPascal]

I did not get it to reproduce the error in stackblitz. It just won't show up but in the project the error is still existing.

[CollinGraf314]

Could this be related to #405? And if so could it be fixed in v5.3.4? If either of you are able to make a stackblitz that recreates the problem I could take a closer look at it.

[ghost]

Yes, it looks related after checking the JsFiddle provided in 405. Can you provide this fix in latest 6.05 package with angular 6

[ChinaeduPascal]

I have tested the version 5.3.4 from issue #405 but it is still the same error and the same situation. Didn't solve it.

[ghost]

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.

[CollinGraf314]

It seems that my commit to fix a typo in dchipan's pull request somehow didn't make it into the release for v5.3.4. I'll see if I can't remedy that. The bug should be fixed properly on v6.06.

v5.3.5 is now released on npm. It has the fix for the Iframe drag, and it also fixes the issue for resizing an item out of an iframe (is not an issue in v6.x for what ever reason).

[ghost]

The issues still exist for me. I was going through previous issues and I see another user having the same issues with ifrrame.
#233

My use case is similar, but instead of iframe I am using external dynamic javascript. Below are the exact steps to reproduce.

1] go here https://portal.tradingwidgets.com/home/c243a158-5cc6-4843-9de7-a1f0ac104996

2] Resize the widget and then release the mouse inside/on top on the widget and you can see the mouse pointer will stick to the widget and you would need to refresh...

A lot of my dynamic widgets work with javascript embedded and all the widgets are causing this problem

[CollinGraf314]

I'm looking at the site you sent me to and I cannot reproduce on Chrome. What browser are you using?

[ghost]

https://portal.tradingwidgets.com/home/c243a158-5cc6-4843-9de7-a1f0ac104996

I am using chrome. This occurs on edge as well. I think earlier that dashboard was missing a widget. I added it now. please see the video below of the same

this one will eventually show gridster js error in dev tools once i click out of the widget

[CollinGraf314]

I played around with it a little, and I see what the problem is, but I don't think it's fixable while keeping the library intact. The fix that came out with v6.0.10 was for when a gridster element was nested in an iframe, and it was as simple as firing a drop event on 'mouseleave' of the gridster element. Here the obvious fix would be to run the drop event on 'mouseout', which would drop the element whenever you leave the gridster element proper, meaning entering a child would fire that event, but that would break just about every other implementation of this library and make the UX very poor.

Something that I could look into is to see if I can't somehow expose the drop event to the user, so that you could manually call it in your app. At that point it would be up to you to find a fix that works for your implementation of angular-gridster2. Would that help?

[ghost]

Thanks for looking into this. As you can see, I have a lot of time & effort invested in this and this is the only one issue I need to solve. Please expose the drop event and I will see how I can use it.

[ghost]

It was recommend by tiberiuzuld in this issue #233 to use the css style pointer-events:none as below. This seems to be a good option. I tried adding the css and it works as expected. Now I can freely resize and drag but I am not sure how to initialize pointer-events back on dock

Basically On start of drag or resize set pointer-events: none and then at end of drag or resize set pointer-events:initial.

Please help. I think this will be great solution for others as well..

gridster-item .itemDiv {
pointer-events: none;
}

//what is my-drag-in-progress class? this does not seem to fire
.my-drag-in-progress gridster-item .itemDiv {
pointer-events: initial;
}

      <ndc-dynamic *ngIf="item.component != null" [ndcDynamicComponent]="item.component" [ndcDynamicInputs]="item.inputs" [ndcDynamicOutputs]="item.outputs"></ndc-dynamic>

    </div>

[CollinGraf314]

The itemResizeCallback() and itemChangeCallback() should be called at the end of a resize or drag event, my thought would be that you can use those callbacks to re-initialize pointer-events.

[ghost]

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)">

[Strawberrysoul]

Hi,
I have the same problem and was very happy when I found @kunal105 's solution. I tried to implement it, but it doesn't work for me, because once the pointerEvents are set to 'none', 'enablePointer()' is never called, because the mouseevent is not called again. This makes sense to me, because we set the events to 'none' before. So I don't get the error anymore, but once I have started resizing oder changing the widget I am not able to use pointerevents inside the widget anymore. Any ideas how I can reset the pointerEvents on a pointer event?