Want to freely drag and drop using ng2-drag-drop angular 2 - html

Question

I am facing some issues while using ng2-drag-drop .
I want to freely drag and drop from one div to another div and then want to drag the dropped div freely in the droppable area.
Issue 1) Whenever i am dropping my draggable div in the corners of droppable area my divs shrink.
Issue 2) I want to drag the dropped items and for that i have applied draggable attribute to the dropped items. But it just make duplicate copies of the dropped items. Is there any way to control it so that I can drag the dropped item freely without making any duplicate copies?
<div class="container">
<div class="row">
<div class="col-xs-12">
<nav class="breadcrumb">
<a class="breadcrumb-item" href="#">Home ></a>
<a class="breadcrumb-item" href="#">Library ></a>
<a class="breadcrumb-item" href="#">Data ></a>
<span class="breadcrumb-item active">Bootstrap</span>
</nav>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-9">
<div class="row drag-drop-area">
<div class="col-xs-12 col-sm-4 col-lg-3 bg-white left-sidebar">
<button class="btn room-obj-btn">Room Objects <span
class="glyphicon glyphicon-arrow-right pull-right"></span></button>
<div class="category">Type</div>
<div class="drag-drop">(Drag and drop to add item)</div>
<div class="row">
<div class="col-xs-6 col-sm-12 col-md-6 surgery-objects-block"
draggable [dragData]="'Item 1'">
<div class="surgery-elements">item 1</div>
</div>
</div>
</div>
<div class="droppable-area col-xs-12 col-sm-8 col-lg-9 drop-area"
droppable (onDrop)="onItemDrop($event,evt)" style="min-height: 883px">
<div class="abc" *ngFor="let item of droppedItems"
style="position: absolute" [style.top]="item.nativeEvent.layerY + 'px'"
[style.left]="item.nativeEvent.layerX +'px'"> <div class="surgery-
elements" draggable >Item 1</div></div>
</div>
</div>
</div>
</div>
</div>
Please find plunker demo below that i have created.
http://plnkr.co/edit/UtgrchNDpiq6CAssilyR?p=preview

Answer 1

Solution for Issue 2
complete-demo-component.html
Add dragData and dragScope properties to your draggable Div.
Add indexing *ngFor="let item of droppedItems; let i = index;"
Change in draggable div <div class="surgery-elements" draggable [dragScope]="'alreadyDropped'" [dragData]="i" >Item 1</div>
<div class="col-xs-12 col-sm-9">
<div class="row drag-drop-area">
<div class="col-xs-12 col-sm-4 col-lg-3 bg-white left-sidebar">
<button class="btn room-obj-btn">Room Objects <span class="glyphicon glyphicon-arrow-right pull-right"></span></button>
<div class="category">Type</div>
<div class="drag-drop">(Drag and drop to add item)</div>
<div class="row">
<div class="col-xs-6 col-sm-12 col-md-6 surgery-objects-block" draggable [dragScope]="'leftItem'" [dragData]="{'data':'Item 1', isFirstTimeDrop:'true'}">
<div class="surgery-elements">item 1</div>
</div>
</div>
</div>
<div class="droppable-area col-xs-12 col-sm-8 col-lg-9 drop-area" droppable [dropScope]="['leftItem', 'alreadyDropped']" (onDrop)="onItemDrop($event,evt)" style="min-height: 883px">
<div class="abc" *ngFor="let item of droppedItems; let i = index;" style="position: absolute" [style.top]="item.nativeEvent.layerY + 'px'" [style.left]="item.nativeEvent.layerX +'px'"> <div class="surgery-elements" draggable [dragScope]="'alreadyDropped'" [dragData]="i" >Item 1</div></div>
</div>
</div>
</div>
complete-demo-component.ts
onItemDrop(e: any,evt) {
// Get the dropped data here
alert(JSON.stringify(e));
if(e.dragData.isFirstTimeDrop != undefined) {
this.droppedItems.push(e);
} else {
this.droppedItems[e.dragData] = e;
}
}
Plnkr Link http://plnkr.co/edit/pMRjGfHncUDf8PtVQIoT?p=preview