CODEWITHSUNDEEP
javascriptjqueryangulartypescript
user2828442
user2828442

Reputation: 2515

Implementing Angular draggable droppable, how can I drop a DIV at a place and it stays there

I am using https://mattlewis92.github.io/angular-draggable-droppable/demo/

I am able to drag my Div's which are seen in the below image, what I want is, if I drag DIV 3 on DIV 1 then DIV 3 should sit in its place and other DIVs should slide down.

enter image description here

My dragdrop.component.ts code:

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 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>

Upvotes: 3

Views: 2420

Answers (2)

turong
turong

Reputation: 1622

I recommend you to use a very convenient plugin of Angular Material named cdk to implement drag & drop application.

https://material.angular.io/cdk/drag-drop/overview

Hope this helps.

Upvotes: 1

Rakesh Singh
Rakesh Singh

Reputation: 231

Please look into this example https://stackblitz.com/edit/angular-draggable-droppable-example1

Upvotes: 2

Related Questions