selective drop

[mgiraldo]

Related to #223 but more granular.

CodePen link

Step by step scenario

From the above CodePen, suppose items of type A cannot be child of items of type B. I'd like to allow dropping inside a nested list selectively. All items can be arbitrarily reordered and nested inside each other but I want to prevent items of type A from being nested inside items of type B.

Actual Solution

No solution that I know of. I tried using the onMove event but I could not find a reference to the drop component where I could test something like:

return draggingItem.item_type === 'A' && dropArea.item_type !== 'B'

Expected Solution

The above check.

[seyfer]

@mgiraldo this is what I do

const onDragMove = (event: DragEventInterface) => {
  console.log(["onDragMove", event]);

  if (event.to.id === "workzones") {
    // cancel workzones to be dropped in own dropzone
    return false;
  }

if your source list has HTML attribute ID and the target list has ID, you can just write logic to check these IDs and return false if forbidden to drop and true if allowed.

[mgiraldo]

ok i was able to produce something similar using data-* attributes on the dropzones. is it possible to provide some visual feedback to indicate that that drop action is not allowed (other than the item returning to its original position)?