I want to drag and drop all Drag over the html page on a single list. But these card's will not overlap on each other and after reloading the page cards will be seen at new position (if dragged and dropped). Please show me a solution. N.B: I have used Angular cdk already on this
Angular CDK is awesome for one specific case - sorting lists. In case you want to have something more flexible, I'd suggest having a look at 3-rd party libraries, for example - Gridster. This could be a solid background for your app in case drag and drop is one of the main features, as usually lib maintainers have already fixed a lot of bugs that you could potentially face if you decide to implement drag and drop functionality from scratch.
In case you want to keep Angular CDK, you have to implement some complicated logic and keep in mind that you should have everything as a set of lists. We wanted to be able to drag and drop elements both vertically & horizontally in our application so we had vertical CDK lists inside one horizontal list. I'd rather don't go this way again if I have to create a new app with D'n'D.
