dflex-js/dflex

Bug: none of the DFlex events are dispatched

ddenev opened this issue · 6 comments

ddenev commented

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 commented

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

  • 👍1
ddenev commented

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

  • 🚀1
ddenev commented

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
      image
  • 👍1
jalal246 commented

  1. You're absolutely right. There was indeed an issue (#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 commented

@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 commented

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

  • 🚀1