Bug: none of the DFlex events are dispatched

[ddenev]

Sandbox for the bug: https://codesandbox.io/p/sandbox/holy-hill-fy6sy2

Expected: dragging should show console logs for $onDragOutContainer, $onDragOutThreshold, $onDragOver, $onDragLeave events.

Even when subscribing to layout/mutation, none of the drag events are fired.

@jalal246, this bug is currently blocking me from using DFlex as I need the events in order to update my state.

Related discussion: #737

[jalal246]

Hi @ddenev , I published a patched version. I hope it solves the issue. I still expect some bugs though.

[ddenev]

Thank you, @jalal246! Will test and let you know

[ddenev]

I have several questions:

1. When migrating an element between containers, many $onDragOver and $onDragLeave events are fired (check the sandbox, drag an element from one container to the other and observer the console). Why so many events for a single drag operation?
   Note: I assume these fire for every child of the receiving container but to me this looks wrong
2. I need an onDrop or a onDragend event, i.e. how do I receive the results from the drag operation?
   Let me explain: I'm using Vue and my lists are rendered based on my reactive state. So I don't really care for DFlex's commit but rather want to receive the proper information during and at the end of the drag operation so that I can update my Vue state - and Vue will take care of the updating/re-rendering the components. That is why I need to "hook" into the proper events, e.g. onDrop.
   The current mutation listener does not work for me either since it just provides an array of new ids in the container and the HTMLElement object - both are not enough for me to understand:
   • which was the element that was moved
   • which was the initial index of the moved element
   • where (index) was it inserted in the receiving container
   • which is the receiving container
     

[jalal246]

1. You're absolutely right. There was indeed an issue (Exclude $ondragleave and $ondragover for list elements when dragged leaves from the top of the container #745) regarding events firing each time the element was transformed when dragged out of the container. I've addressed this and it's now fixed.

2. I understand your concern. I'll work on finding a solution for this. It would be helpful to have a drag' event that provides information about the path the drag operation took.

Meanwhile, you can try another event: $onLiftUpSiblings when dragged moving out and elements are up,
and $onMoveDownSiblings when dragged enter the container and move elements down.

https://github.com/dflex-js/dflex/blob/main/packages/dflex-dnd/src/Events/constants.ts#L3-L26

[jalal246]

@ddenev, $onDragCommitted will emit

type PayloadDragCommitted = {
  /** Represents the main category of the drag event. */
  category: typeof DRAG_CAT;

  /** Indicates the timestamp when the event occurred. */
  timestamp: number;

  /** Targeted elements */
  element: HTMLElement;

  indexes: {
    /** The initial index of the moved element. */
    initial: number;

    /** The index where it was inserted in the receiving container. */
    inserted: number;
  };

  containers: {
    /** The container from which the element originated. */
    origin: HTMLElement;

    /** The container where the element is now located. */
    target: HTMLElement;
  };
}

[ddenev]

@jalal246, that's very nice, thank you! I will play with this the next couple of day and will let you know :)