如何使用Angular的拖放模块将元素拖放到另一个元素上? [英] How to use Angular's Drag and Drop module to drag an element onto another?

问题描述

我无法弄清楚如何将Angular的

谢谢.

解决方案

我最接近的是

2.-转换唯一的cdkDropList，我们可以在其中放入许多cdkDropList作为元素.为此，请使用cdkDropListGroup，并将属性cdkDropListSortingDisabled ="true"添加到每个cdkList.原因是，当我们放置您放置在哪个元素中的其他元素时，还不清楚

3.-具有两个元素列表可以拖动，并使用(cdkDragStarted)(cdkDragEnded)更改样式.拖动时显示为无

.html

 < div cdkDropListGroup>< div class ="example-container">< h2>要做</h2>< div class ="example-list" id ="todoList">< div * ngFor =让待办事项；让i = index"cdkDropList cdkDragcdkDropListSortingDisabled ="true"[cdkDragDisabled] ="true"[cdkDropListConnectedTo] ="[doneList]"(cdkDropListDropped)="drop($ event，i)" class ="example-box"> {{item}}</div></div></div>< div class ="example-container">< h2>完成</h2>< div>< div [style.display] ="onDrag?'none':''" cdkDropList id ="doneList"[cdkDropListData] =完成"class ="example-list"(cdkDropListDropped)="drop($ event)">< div class ="example-box" * ngFor =完成一项操作"cdkDrag(cdkDragStarted)="onDrag = true"(cdkDragEnded)="onDrag = false">{{物品}}< div class ="line" * cdkDragPlaceholder></div></div></div></div>< div class ="background" * ngIf ="onDrag">< div class ="example-list">< div class ="example-box" * ngFor =完成已完成的项目"> {{item}}</div></div></div></div></div> 

拖放功能为

  drop(事件:CdkDragDrop< string []> ;，索引:编号){console.log(event.previousContainer.data [event.previousIndex]，'->'，this.todo [index]);} 

I cannot figure out how to use Angular's Drag and Drop module for something other than move items between lists.

I have a list of items and I want to drag them on individual groups. Incidentally, there are two lists involved here, one list with groups and one list with items.

Here's the template code (please see this https://stackblitz.com/edit/angular-xp4um9 for the full code):

<div class="container">
  <div class="drop-target"> 
    <mat-selection-list 
      cdkDropList
      #dropTarget="cdkDropList"
      (cdkDropListDropped)="drop($event)"
      [cdkDropListData]="groups"
    >
      <mat-list-option *ngFor="let group of groups" [value]="group.id"
      >
        {{ group.name }}
      </mat-list-option>
    </mat-selection-list>
  </div>

  <div class="drag-source">
    <mat-selection-list 
      cdkDropList
      [cdkDropListConnectedTo]="[dropTarget]"
    >
      <mat-list-option *ngFor="let item of items" [value]="item.id"
        cdkDrag
        [cdkDragData]="item"
      >
        {{ item.name }}
      </mat-list-option>
    </mat-selection-list>
  </div>
</div>

I want to drag an item from the second list and drop it onto a group in the first list, not as a new element of the second list, as documented everywhere on the internet, but to become part of the group it is dropped onto.

I'd like to be able to get in the drop() function the source item and the destination group.

Also, how can I prevent the first list from shrinking when dragging the item over the second list and also prevent the item appearing below the groups (as in the image below) ?

Thanks.

解决方案

the most closed I get is this stackblitz

I have three ideas

1.-Make a empty div as cdkDragPlaceholder

<div class="line" *cdkDragPlaceholder></div>

2.-Convert the unique cdkDropList where we can drop in so many cdkDropList as elements we have. For this is necesary use cdkDropListGroup, and add the propertie cdkDropListSortingDisabled="true" to each cdkList. The reason is that else is not clear when we make the drop in which element you are dropped

3.-Have two list for element can be dragger and Use (cdkDragStarted) (cdkDragEnded) to change style.display to none when is dragged

The .html

<div cdkDropListGroup>
    <div class="example-container">
        <h2>To do</h2>

        <div class="example-list" id="todoList">
            <div *ngFor="let item of todo;let i=index"
        cdkDropList cdkDrag
        cdkDropListSortingDisabled="true" 
        [cdkDragDisabled]="true"
                [cdkDropListConnectedTo]="[doneList]" 
                (cdkDropListDropped)="drop($event,i)" class="example-box"
        >{{item}}</div>
        </div>
    </div>

    <div class="example-container">
        <h2>Done</h2>
        <div>
            <div [style.display]="onDrag?'none':''" cdkDropList id="doneList" 
                 [cdkDropListData]="done"
                  class="example-list" (cdkDropListDropped)="drop($event)">
                <div class="example-box" *ngFor="let item of done" 
           cdkDrag 
          (cdkDragStarted)="onDrag=true"
                    (cdkDragEnded)="onDrag=false">
          {{item}}
                    <div class="line" *cdkDragPlaceholder></div>
                </div>
            </div>
        </div>
        <div class="background" *ngIf="onDrag">
            <div class="example-list">
                <div class="example-box" *ngFor="let item of done">{{item}}
                </div>
            </div>
        </div>
    </div>
</div>

And the drop function as

  drop(event: CdkDragDrop<string[]>,index:number) {
      console.log(event.previousContainer.data[event.previousIndex],
                  '-->',
                  this.todo[index]);
  }

这篇关于如何使用Angular的拖放模块将元素拖放到另一个元素上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！