Question

使用ng2-drag-drop时我遇到了一些问题。我想自由地从一个div拖放到另一个div然后想要在可放置区域中自由拖动掉落的div。问题1）每当我在可投放区域的角落放下我的可拖动div时，我的div会缩小。

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

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

http://plnkr.co/edit/UtgrchNDpiq6CAssilyR?p=preview

Answer 1

问题2的解决方案

<强>完整-演示component.html

将dragData和dragScope属性添加到draggable Div。

添加索引*ngFor="let item of droppedItems; let i = index;"

更改可拖动的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>

<强>完整-演示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

想要使用ng2-drag-drop angular 2自由拖放

1 个答案: