diff --git a/projects/lib/src/dynamic-views/drag-drop.service.ts b/projects/lib/src/dynamic-views/drag-drop.service.ts
index 3b4a039..5117513 100644
--- a/projects/lib/src/dynamic-views/drag-drop.service.ts
+++ b/projects/lib/src/dynamic-views/drag-drop.service.ts
@@ -50,6 +50,15 @@ export class DragDropService {
     }
   }
 
+  public handleCancel(
+    index: number,
+    containerId: string
+  ) {
+    const container = this.configService.getContainer(containerId);
+    container.items.splice(index, 1);
+    this.configService.updateConfig([container]);
+  }
+
   private insertNew(
     container: ContainerConfig,
     index: number,
diff --git a/projects/lib/src/dynamic-views/item.component.html b/projects/lib/src/dynamic-views/item.component.html
index 431c866..ff9d5df 100644
--- a/projects/lib/src/dynamic-views/item.component.html
+++ b/projects/lib/src/dynamic-views/item.component.html
@@ -21,6 +21,7 @@
       [dndHorizontal]="ref.isHorizontal()"
       [dndDisableDropIf]="!isContainer(item) || dataIndex > 0"
       (dndDrop)="onDndDrop(item, $event)"
+      (dndCanceled)="onDndCanceled(item, i)"
     ></div>
   </ng-container>
 </ng-container>
diff --git a/projects/lib/src/dynamic-views/item.component.ts b/projects/lib/src/dynamic-views/item.component.ts
index 84b9658..78b08f6 100644
--- a/projects/lib/src/dynamic-views/item.component.ts
+++ b/projects/lib/src/dynamic-views/item.component.ts
@@ -82,6 +82,11 @@ export class ItemComponent implements OnInit, OnDestroy {
     }
   }
 
+  onDndCanceled(item: string, index: number) {
+    console.log('cancelled', item, this.id);
+    this.dragDropService.handleCancel(index, this.id);
+  }
+
   isContainer(id: string) {
     return this.configService.isContainer(id);
   }