Drop zone directive for Angular CDK drag-drop

Question

I am relatively new in Angular 2+ and I want to drag a div within another div. I am using Drag & Drop CDK and wrote the following code to do that;

<div cdkDrop>    
    <div cdkDrag class="wrapper">
         <header cdkDragHandle class="widget__header">{{ title }}</header>
         <section class="widget__content">{{ content }}</section>
     </div>
</div>

I read in this article that for having a drop zone, you just need to add cdkDrop directive to your div but it doesn't work for me although dragging is OK. Can anybody tell me how to define the drop zone?

Tumit Watcharapol Tumit Watcharapol · Accepted Answer · 2018-12-11T08:53:09

I found same problem with cdkDrop too and after google I found it rename to cdkDropList sine v7.0.0-rc.2 (2018-10-15) so you can use it instead.

Drop zone directive for Angular CDK drag-drop

1 Answers