CODEWITHSUNDEEP
angulardrag-and-dropangular-cdk
cranderveldt
cranderveldt

Reputation: 129

Can I get a cdkDrag element to emit a dropped event without cdkDragList container?

I’m working moving an app from angularjs over to Angular 7. I have a map tool for keeping track of game pieces on a grid. Right now how it works is I listen for drag/drop events on each game piece and on the drop event I update the game piece's x/y position in the db. I’m looking here at https://material.angular.io/cdk/drag-drop and it doesn’t look like I can recreate that functionality. No matter how I set it up, I can't get the cdkDragDropped event to fire (or any of the other events for that matter).

When I try to use these pieces within a cdkDropList, the pieces become locked in place and can only switch places with one another, not freely dragged around. Is there any way to listen to drop events from a cdkDrag element outside of a cdkDropList? Or perhaps free up draggables once they're in a cdkDropList so they can move around more freely?

Failing all of that, can anyone recommend me a better drag and drop plugin for Angular 7? :D

Upvotes: 2

Views: 2113

Answers (2)

Iram Udoy
Iram Udoy

Reputation: 23

use ngx-drag-drop instead of cdk-drag-drop.

By (dndDrop)="onDrop($event)" you can easily get the drop event with all necessary properties. You can bind data into it.

https://www.npmjs.com/package/ngx-drag-drop

Upvotes: 0

cranderveldt
cranderveldt

Reputation: 129

The answer is cdkDragReleased, which works without a container.

Upvotes: 3

Related Questions