Flexibility of Drag&Drop Feature

Widgets
1

Hi,

I have two questions concerning the new drag&drop feature in the Tree widget. In our project (<PROJECT_NAME>) we must support dragging tree items to a target outside of the tree, plus the available targets need to be calculated (via a server request). Currently, i have my own drag&drop implementation, but we could use the drag&drop behaviour of the DnDTree when the dragged element is hovering over the tree.

  1. Is there a way to access more events than just the drop event that is provided by the DragDrop tree behaviour? Listening to the dragstart event would be a very simple way to merge the A12 drag&drop feature with our requirements.

In the future, we probably need to support dragging from outside into the tree as well.

  1. The only way that comes to my mind is to implement our own react-dnd components that match the draggable tree items in the DnDTree. Is this the right way? Is there an easier way?

Best Regards,

Alex (<PROJECT_NAME> Team)

2

@alexander-pure-wind:
Just in case - are you aware of the 4 D&D examples in the Widgets Showcase: <INTERNAL_LINK>

@tuan-stable-gale or @quang-calm-slope: Please have a deeper look at the questions above.

3

Yes, I have looked briefly at the examples. 3 of them are showing the usage between A12 widgets and have no visible interface for extern event handlers.

The first example is showing the basic usage of the react-dnd package, which I am trying out at the moment. But I have not managed to connect the custom events with the DnDTree yet, so I still would be glad about any hint or support. Anyways, as soon as I have implemented it myself, i will post it here.

4

Well, it is possible with react-dnd to dispatch an event on dragstart. Inside a custom DragSource I can simply include a side effect in the DragSourceSpec like this:

{
  beginDrag(props) {
    customSideEffects();
    // ...
    return data;
  }
}

But if I am using a custom DragSource, I also need to define a custom DragDropContext…

DragDropContext(DragAndDropUtils.DefaultDndBackend as BackendFactory)(CustomContainer)

And if I want to make use of the DnDTree (A12 widget) simultaneously, where the custom DragSource should be dropped, I get the following error:

Error: Cannot have two HTML5 backends at the same time.

Therefore I currently see no possibility to merge any custom implementation of react-dnd with the DnDTree and I am still waiting for support/hints/…

5

This topic will be followed up in the ticket: [A12W-3670]<INTERNAL_LINK>.