0

最近，我正在研究一种方案，该方案允许用户将项目从一个容器拖到放置区域以存储项目。这将是一种类似于 draw.io 的方式。

但是，cdkDropList 中的项目是粘性的。它不能四处走动。

<div class="left-panel">
        <h6>container</h6>
        <div class="widget-container" 
        cdkDropList
        [id]="'container'"
        [cdkDropListData]="customWidgets"
        [cdkDropListConnectedTo]="['container', 'artBoard']"
        >
            <div cdkDrag><svg height="50" width="50">
            <rect width="50" height="50" style="fill:rgb(0,0,255);stroke- width:3;stroke:rgb(0,0,0)" />
            </svg>
            </div>
        </div>
        
    </div>

<div class="middle-workspace">
        <div class="svg-container" style="width:300px;height:300px;border-style: dotted;" 
        cdkDropList 
        [id]="'artBoard'" 
        [cdkDropListData]="artBoardWidges" 
        [cdkDropListConnectedTo]="['container', 'artBoard']"
        (cdkDropListDropped)="onTalkDrop($event)"
        >
            <app-widget-rect cdkDragBoundary=".svg-container" *ngFor="let artBoardWidge of artBoardWidges"></app-widget-rect>
        </div>
    </div>

更新于 06/26-02:25 感谢@FunkMonkey33 的回复

下面的代码是我的dragHandler，显然它将原始项目从其容器复制到目标容器。

onTalkDrop(event: CdkDragDrop<Widget[]>) {
    // In case the destination container is different from the previous container, we
    // need to transfer the given task to the target data array. This happens if
    // a div has been dropped on a different dropList.
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      copyArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }
  }
4

0 回答 0