Html 要使用ng2拖放角度2自由拖放吗

我在使用ng2拖放时遇到了一些问题。 我想自由地从一个div拖放到另一个div，然后想在可拖放区域自由地拖动拖放的div。 问题1）每当我把我的可拖拽潜水器放在可拖拽区域的角落时，我的潜水器就会收缩

问题2）我想拖动已删除的项目，为此，我已将draggable属性应用于已删除的项目。但它只是复制掉的项目。是否有任何方法可以控制它，以便我可以自由拖动拖放的项目，而无需复制任何副本

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

独自创立
房间对象
类型
（拖放以添加项目）
项目1
项目1

请在下面找到我创建的plunker演示

---

问题2的解决方案

完整的演示组件.html

将

dragData

和

dragScope

属性添加到

draggable

Div中

添加索引

*ngFor=“let-item of-droppedItems；let i=index；”

可拖动分区的更改

项目1

---

Plnkr链接问题2的解决方案

完整的演示组件.html

将

dragData

和

dragScope

属性添加到

draggable

Div中

添加索引

*ngFor=“let-item of-droppedItems；let i=index；”

可拖动分区的更改

项目1

---

Plnkr Link

如果您尝试稍微移动一个已经放下的项目，它在演示应用程序中不起作用。。你能检查一下吗？是的，那是因为

在

可拖放

div

中，所以你把物品放在可拖动的物品上。你知道如何克服它吗？我需要能够稍微移动掉的项目以进行小的调整。@balazs630，我不这么认为，因为您必须将项目从这个div

的一侧掉下来，或者您可以处理掉的事件并显示一些警告消息，如警报。如果你试图移动一个已经掉落的物品一点点，它在演示应用程序中不起作用。。你能检查一下吗？是的，那是因为

在

可拖放

div

中，所以你把物品放在可拖动的物品上。你知道如何克服它吗？我需要能够稍微移动掉的项目以进行小的调整。@balazs630，我不这么认为，因为您必须将项目从这个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>

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