所以我想实现一个用例,我想使用拖放将一些数据从一个区域(div)复制到另一个区域,我通过在网上冲浪发现Angular/Material2可以通过消耗cdkDropList来完成这项工作API。
我通过 Angular/Material2 提供的 copyArrayitem 函数进行了实现,它完成了工作,一切都很好。
问题是,下拉列表总是排序,而不是我希望我的可拖动组件在放置区域内自由,但 cdkDropList 强制在区域中排序。
所以我开始在互联网上搜索以获得一些解决方案,我发现一些博客讨论了 cdkDrop 指令组件,但我猜它没有得到支持,因为我没有找到该组件(cdkDrop)的任何开源代码angular/material2 的 GitHub 存储库,相反,我发现了一些有关 cdkDropList 指令中的 cdkDropListSortingDisabled 属性的问题,您可以参考 https://github.com/angular/material2/blob/master/src/cdk/drag-drop /directives/drop-list.ts 清楚地理解我在说什么,尤其是在这些行中
@Input('cdkDropListSortingDisabled') get sortingDisabled(): boolean {
return this._sortingDisabled;
}
set sortingDisabled(value: boolean) {
this._sortingDisabled = coerceBooleanProperty(value);
}
知道 Angular Material 官方网站(https://material.angular.io/cdk/drag-drop/api)不提供此属性。
问题知道,是否有任何可能的解决方案可以直接从 Angular GitHub 存储库使用此属性?
我尝试使用此行命令将分支添加为 package.json 中的依赖项
npm install --save Angular/material2#master 但是 npm 无法解决这个错误
npm 错误!代码 生命周期
npm 错误!错误号 1
npm 错误! [电子邮件受保护]预安装:node ./tools/npm/check-npm.js
npm 错误!退出状态1
npm 错误!
npm 错误! [电子邮件受保护]预安装脚本失败。
npm 错误!这可能不是 npm 的问题。上面可能有额外的日志输出。
或者有不同的解决方案来禁用 cdkDropList 中的排序?或执行此操作?
注意:Angular 版本 7
尽管我的英语水平有限,但我希望我能传达这个想法。
我将感谢您的帮助(博客或答案)
致以诚挚的问候。
您可以将其作为属性直接在 html 上传递:
<div
cdkDropList
[cdkDropListData]="imgFiles"
[cdkDropListDisabled]="true"
class="image-list"
[cdkDropListOrientation]="listOrientation"
(cdkDropListDropped)="drop($event)">
<div class="image-box" [ngClass]="{'mobile-full-img': !originalData.only}" cdkDrag *ngFor="let item of imgFiles">
<mat-checkbox *ngIf="!originalData.only" color="primary" (dblclick)="checkItmIE(item)" [(ngModel)]="item.checked"></mat-checkbox>
<img [src]="item.src">
<div class="spinner-wrapper" *ngIf="!item.done">
<div class="spin"></div>
</div>
<span class="success-check-span" *ngIf="item.done && !item.stopStatusFeedback">
<i class="fas fa-check-circle"></i>
</span>
</div>
</div>