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

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 &gt;</a>
        <a class="breadcrumb-item" href="#">Library &gt;</a>
        <a class="breadcrumb-item" href="#">Data &gt;</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