I'm currently using the Angular draggable droppable demo found at this link
In the image below, I have Divs that can be dragged. What I want to achieve is when I drag DIV 3 onto DIV 1, I want DIV 3 to stay in place and the other DIVs to slide down accordingly.
https://i.sstatic.net/aKybK.png
Here's a snippet from my dragdrop.component.ts file:
import { Component, OnInit, NgModule } from '@angular/core';
import {DragAndDropModule} from 'angular-draggable-droppable';
@Component({
selector: 'app-dragdrop',
templateUrl: './dragdrop.component.html',
styleUrls: ['./dragdrop.component.css']
})
export class DragdropComponent implements OnInit {
droppedData: string;
constructor() { }
ngOnInit() {
}
dragEnd(event) {
console.log('Element was dragged', event);
}
}
And here's part of my dragdrop.component.html code:
<br><br>
<div mwlDraggable (dragEnd)="dragEnd($event)">Drag DIV 1</div>
<br><br>
<div mwlDraggable (dragEnd)="dragEnd($event)">Drag DIV 2</div>
<br><br>
<div mwlDraggable (dragEnd)="dragEnd($event)">Drag DIV 3</div>
<div
(drop)="this.droppedData = $event.dropData">
<span [hidden]="!droppedData">Item dropped here with data: "{{ droppedData }}"!</span>
</div>