4


所以我想实现一个用例，我想使用拖放将一些数据从一个区域（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);
}

知道角材料官方网站（https://material.angular.io/cdk/drag-drop/api），不提供此属性。问题知道，是否有任何可能的解决方案可以直接从 Angular GitHub 存储库中使用此属性？
我尝试使用此行命令将分支添加为我的 package.json 中的依赖项

npm install --save angular/material2#master 但 npm 无法解决此错误
npm ERR！代码 ELIFECYCLE
npm 错误！errno 1
npm 错误！material2-srcs@7.3.4 预安装：节点 ./tools/npm/check-npm.js
npm ERR！退出状态 1
npm ERR！
npm 错误！在 material2-srcs@7.3.4 预安装脚本中失败。
npm 错误！这可能不是 npm 的问题。上面可能有额外的日志输出。

或者有不同的解决方案来禁用 cdkDropList 中的排序？或执行此操作？注意：Angular 版本 7
尽管我的英语水平很高，但我希望我能接受这个想法。
我将感谢您的帮助（博客或答案）
最好的问候。

4

1 回答 1

0

您可以直接在 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>
于 2020-01-22T15:54:27.403 回答