title: Want to freely drag and drop using ng2-drag-drop angular 2
body: <p>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. </p>
  
  <p><a href="https://i.stack.imgur.com/E9HkA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E9HkA.png" alt="Reference Image"></a></p>
  
  <p>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?</p>
  
  <pre><code>    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
      &lt;div class="col-xs-12"&gt;
        &lt;nav class="breadcrumb"&gt;
          &lt;a class="breadcrumb-item" href="#"&gt;Home &amp;gt;&lt;/a&gt;
          &lt;a class="breadcrumb-item" href="#"&gt;Library &amp;gt;&lt;/a&gt;
          &lt;a class="breadcrumb-item" href="#"&gt;Data &amp;gt;&lt;/a&gt;
          &lt;span class="breadcrumb-item active"&gt;Bootstrap&lt;/span&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
      &lt;div class="container"&gt;
      &lt;div class="row"&gt;
      &lt;div class="col-xs-12 col-sm-9"&gt;
        &lt;div class="row drag-drop-area"&gt;
          &lt;div class="col-xs-12 col-sm-4 col-lg-3 bg-white left-sidebar"&gt;
  
            &lt;button class="btn room-obj-btn"&gt;Room Objects &lt;span 
      class="glyphicon glyphicon-arrow-right pull-right"&gt;&lt;/span&gt;&lt;/button&gt;
            &lt;div class="category"&gt;Type&lt;/div&gt;
            &lt;div class="drag-drop"&gt;(Drag and drop to add item)&lt;/div&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-xs-6 col-sm-12 col-md-6 surgery-objects-block" 
      draggable [dragData]="'Item 1'"&gt;
                &lt;div class="surgery-elements"&gt;item 1&lt;/div&gt;
              &lt;/div&gt;
  
            &lt;/div&gt;
  
  
  
          &lt;/div&gt;
          &lt;div class="droppable-area col-xs-12 col-sm-8 col-lg-9 drop-area" 
      droppable (onDrop)="onItemDrop($event,evt)" style="min-height: 883px"&gt;
            &lt;div class="abc" *ngFor="let item of droppedItems" 
      style="position: absolute" [style.top]="item.nativeEvent.layerY + 'px'" 
      [style.left]="item.nativeEvent.layerX +'px'"&gt; &lt;div class="surgery-
      elements" draggable &gt;Item 1&lt;/div&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please find plunker demo below that i have created.</p>
  
  <p><a href="http://plnkr.co/edit/UtgrchNDpiq6CAssilyR?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/UtgrchNDpiq6CAssilyR?p=preview</a></p>