Angular 8 Drag and Drop With Zone Limits

Question

I am asking for some assistance resolving an issue I have been scratching my head on for a few days now.

Problem

I am currently trying to implement a drag-and-drop feature that requires you being able to drag up to 10 items to fill in designated spots (spots are only allowed to hold 1 item) and after the 10 are filled, the options will then not allow any more dragging until a spot is cleared.

I am currently using the Ngx-Smooth-DND library for my drag-and-drop, but I am not limited to this and can be open to a different library if it can meet the requirements (including Kendo Sortable which I have a license for).

Where I am struggling is that drag-and-drop allows more than one item to go into a list/zone, whereas I am wanting to only allow a single item in a zone at a time. Imagine a drag-and-drop quiz where you can drag an answer to only one spot on a diagram, and once you have one there the only thing you can do is either replace it by dropping another item or not allow anything else to be dropped until you clear the space.

Requirements

Needing to implement a drag-and-drop requirement where you can drag items from a list of options and drop them into 1 of 10 different zones.

N number of possible options to drag
10 Drop Zones
Can only hold 1 item MAX

Code Example

I am pasting a Stackblitz showing what I am going for and I am also going to link the Ngx-smooth-dnd library github for documentation:

https://stackblitz.com/edit/angular-ro3pyw

https://github.com/kutlugsahin/ngx-smooth-dnd

Bonus

If there is a better approach or better drag-and-drop library that can accomplish this much cleaner and simpler, I am 100% open to options.

The place/replace. The inherit behavior of drag and drop is that you continually can add to a list. So if you look at the Stackblitz I posted, you could technically drag all of them into the first zone vs the individual zones, which goes against preventing more than 1. — Doodely
I can't see anything obvious in the Ngx-Smooth-DnD docs that will help you do what you're asking for, though I am not familiar with that library. I have implemented similar behavior with the Angular CDK. This link provides a sample: material.angular.io/cdk/drag-drop/… — MS_AU
I considered the material library drag-and-drop. Do you have an example of one where you have 10 drop zones that can allow only one item to be dropped within them? — Doodely

timhc22 timhc22 · Accepted Answer · 2019-11-22T21:20:05

I have used angular material: https://material.angular.io/cdk/drag-drop/overview To create something similar.

I used this example: https://material.angular.io/cdk/drag-drop/overview#controlling-which-items-can-be-moved-into-a-container to figure out how to limit the number of items which could exist in a container:

// drop-example.component.html
<div class="drop-area" cdkDropList
  #dropArea="cdkDropList"
  [cdkDropListData]="myEmptyArrayVariable"
  [cdkDropListConnectedTo]="[optionsList]"
  (cdkDropListDropped)="drop($event)"
  [cdkDropListEnterPredicate]="limiterPredicate">

// drop-example.component.ts
import { CdkDragDrop, moveItemInArray, transferArrayItem, CdkDrag, CdkDropList } from '@angular/cdk/drag-drop';

...
// see section in the drag-drop docs for example drop($event) {} function
...

limiterPredicate(item: CdkDrag, container: CdkDropList) {
  if (container.data.length === 0) {
    return true;
  } else {
    return false;
  }
}

If you can't work out the rest, then I can try and create a stackblitz for you, just let me know!

Angular 8 Drag and Drop With Zone Limits

1 Answers