如果已有项目，则禁用放置区域-ngx-smooth-dnd

问题描述

我使用ngx-smooth-dnd，并且在放置了一项后，我需要禁用放置位置。

我尝试使用onDragStart，onDragEnd，onDropReady

Component.html

 <smooth-dnd-container
  [groupName]="'dropZoneGroup'"
  (drop)="onDrop($event)"
  (dragStart)="onDragStart($event)"
>
  <smooth-dnd-draggable>
    <div
      [input]="data"
    ></div>
  </smooth-dnd-draggable>
</smooth-dnd-container>

Component.ts

  @input() input;

  constructor() { }

  onDrop(dropResult) {

    if (this.data.length > 0) {
       return;
    }

      this.data= applyDrag(this.data,dropResult);

  }

// Also try call onDragStart,but nothing change

  onDragStart({ isSource,payload,willAcceptDrop }) {
    return ({ isSource: false,willAcceptDrop: true })
  }

// Also try this but doesn't working

onDropReady(dropResult: IDropResult) {
   const { removedindex,addedindex,element } = dropResult;
        if(addedindex > 0){
           return;
        }
        this.data= applyDrag(this.data,dropResult);
}

您可以看到所有这些，然后在这里stackblitz

解决方法

嗯。我无法发表评论，因此将其添加为答案。 在容器上尝试 shouldAcceptDrop 事件，例如：

<smooth-dnd-container
          [groupName]="'1'"
          [getChildPayload]="getChildPayload2"
          (drop)="onDrop($event)"
          (dragStart)="onDragStart($event)"
          [shouldAcceptDrop]="hasNoChild"
        >
          <smooth-dnd-draggable *ngFor="let item of items2">
            <div class="draggable-item">
              {{ item.data }}
            </div>
          </smooth-dnd-draggable>
        </smooth-dnd-container>

和你的班级：

constructor() {

    ...

    this.hasNoChild = this.hasNoChild.bind(this);

    ...

  }

  ...

  hasNoChild() {
    return !this.items2 || this.items2.length === 0;
  }