CODEWITHSUNDEEP
angularangular-materialdrag-and-dropweb-frontendangular-cdk
hawker_Baker
hawker_Baker

Reputation: 25

Implement a Material CDK based Drag and Drop Functionality

Kindly look at this link: https://stackblitz.com/angular/nabbkobrxrn?file=src/app/cdk-drag-drop-enter-predicate-example.ts Within this above example I want to acheive the following:

  1. Out of the "Available numbers" list i need to be able to put only one number in the even list (not create a list of numbers);

  2. Restrict drag and drop within the lists;

  3. Whenever the number in the Even list is replaced with another drop from the Available numbers list, the present value in the even numbers list goes back to the original place in the available numbers list.

  4. Store the current value in the even list to a variable and display it separately.

I tried something from my end , I can get the requirement 4. somehow but the others are not achieved. Would be of immense help if anyone please edit the code and share the code path?

Upvotes: 1

Views: 344

Answers (1)

Mr. Stash
Mr. Stash

Reputation: 3160

Try this below code, here are the things I did

  1. Added an object that contains the array and the list name to cdkDropListData
  2. Modified the drop method logic to only handle the transfer of items from one list to the other

Hope this helps.


all = [1, 2, 3, 4, 5, 6, 7, 8, 9];
even = [10];
originalIndex = 9;

drop(event: CdkDragDrop<{ val: string[]; list: string }>) {

  if (event.previousContainer !== event.container) {

    if (event.container.data.list === 'even') {
      if (event.container.data.val.length === 0) {
        transferArrayItem(
          event.previousContainer.data.val,
          event.container.data.val,
          event.previousIndex,
          event.currentIndex
        );
      } else {

        if(event.container.data.val.length){
          transferArrayItem(
            event.container.data.val,
            event.previousContainer.data.val,
            0,
            this.originalIndex
          );

          event.previousIndex = event.previousIndex >= this.originalIndex ? event.previousIndex + 1 : event.previousIndex
        }

        transferArrayItem(
          event.previousContainer.data.val,
          event.container.data.val,
          event.previousIndex,
          event.currentIndex
        );

        this.originalIndex = event.previousIndex;
      }
    }
  }
}

<div
  id="all"
  cdkDropList
  [cdkDropListData]="{val: all, list: 'all'}"
  cdkDropListConnectedTo="even"
  class="example-list"
  (cdkDropListDropped)="drop($event)"
  [cdkDropListEnterPredicate]="noReturnPredicate"
>
  <div
    class="example-box"
    *ngFor="let number of all"
    [cdkDragData]="number"
    cdkDrag
  >
    {{number}}
  </div>
</div>


<div
  id="even"
  cdkDropList
  [cdkDropListData]="{val: even, list: 'even'}"
  cdkDropListConnectedTo="all"
  class="example-list"
  (cdkDropListDropped)="drop($event)"
  [cdkDropListEnterPredicate]="evenPredicate"
>
  <div
    class="example-box"
    *ngFor="let number of even"
    cdkDrag
    [cdkDragData]="number"
  >
    {{number}}
  </div>
</div>

Upvotes: 1

Related Questions