如何解决如果已有项目,则禁用放置区域-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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。