4


So I want to implement a use case, I want to copy some data from a zone (div) to the other zone using drag and drop, I found by surfing on the net that angular/material2 could do the work, by consuming the cdkDropList API. I did the implementation by the copyArrayitem function provided by angular/material2, it does the work, everything from know is fine. The problem is, the droplist is getting always sorted instead I want my draggable component to get free inside the drop zone, but cdkDropList forces the sorting in the zone.
so I start searching on the internet the get some solutions, I found some blogs talk about the cdkDrop directive component but I guess it doesn't get supported, because I didn't find any open source code for this component (cdkDrop) in the angular/material2's GitHub repo, instead I found some issues talking about the cdkDropListSortingDisabled property in the cdkDropList directive, you can refer back to https://github.com/angular/material2/blob/master/src/cdk/drag-drop/directives/drop-list.ts to clearly understand what I'm talking about, especially in those lines

@Input('cdkDropListSortingDisabled') get sortingDisabled(): boolean { 
    return this._sortingDisabled; 
}
set sortingDisabled(value: boolean) {
    this._sortingDisabled = coerceBooleanProperty(value);
}

knowing that angular material officiel website (https://material.angular.io/cdk/drag-drop/api), dosen't provide this property. The Question know, is there any possible solutions to consume this property directly from the angular GitHub repository?
I tried to add the branch as a dependency in my package.json by using this line command

npm install --save angular/material2#master but npm couldn' resolve it with this error
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! material2-srcs@7.3.4 preinstall: node ./tools/npm/check-npm.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the material2-srcs@7.3.4 preinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Or there are different solutions to disable the sorting in the cdkDropList? or to do this implementation?. NB: Angular version 7
I wish that i tansmit the idea despite my english level.
I will be appreciate for your helps (blogs or answers)
Best regards.

MrNobody
  • 41
  • 4

1 Answers1

0

You could pass it as a property directly on the 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>
Chema
  • 887
  • 8
  • 14