ng-sortgrid inside cdkDrag element broken since Angular CDK version 13.2.4 about ng-sortgrid HOT 6 CLOSED

I'm very sorry for this imprecise bug report.

In the meantime I setup a brand new Angular "Hello World" project and realized that ng-sortgrid works with Angular version 13.2.4.
So I went deeper in root cause analyses and found out what causes the issue I encountered in my project.

Generally, I use Angular's CDK Drag'n'Drop functionality to make blocks in vertical order sortable. Inside one of these blocks I have a grid that I made sortable with ng-sortgrid because Angular Drag'n'Drop functionality with display: flex; flex-wrap: wrap is still a big pain in the ass.

So far this worked like a charm, but with upgrading Angular from version 13.2.3 to 13.2.4 ng-sortgrid functionality broke completely, because mouse events were not recognized anymore with ng-sortgrid.
When I remove Angular's CDK Drag'n'Drop functionality in the parent's DIV, ng-sortgrid works again.

I don't have a solution yet, but it has absolutely nothing to do with ng-sortgrid, so I close this issue.

from ng-sortgrid.

@loebi-ch. Wow. Thx a lot for the research and the awesome explanation. Glad to hear that it works. I already started researching a bit but couldn't figure out a solution. But thx to your explanation everything makes perfect sense now. Thx a lot 👍

from ng-sortgrid.

I've found the root cause in Angular's cdk/drag-drop/drag-ref.ts
In Angular CDK version 13.2.4 they've added a line to preventDefault() on dragstart event.

If I comment out the above line again, ng-sortgrid works again.

from ng-sortgrid.

I opened a new bug report within angular/components:
angular/components#24533

from ng-sortgrid.

👍

from ng-sortgrid.

I have found a solution:

Use (dragstart)="$event.stopPropagation()" within cdkDrag element:

<div cdkDropList>
	 <div class="block" cdkDrag>
		<span cdkDragHandle>:</span> Block 1
	 </div>
	 <div class="block" cdkDrag>
		<span cdkDragHandle>:</span> Block 2
		<ul (dragstart)="$event.stopPropagation()">
			<li *ngFor="let item of items" ngSortgridItem [ngSortGridItems]="items">List Item {{item}}</li>
		</ul>
	 </div>
</div>

from ng-sortgrid.