Detect drop target node in a tree

[nakhli]

Hello,

I am using dnd to let the user re-arrange a tree, one element at a time. I can easily get the dragged element but didn't find how to get the drop target. Here is a code snippet:

final TreeDropTarget<IMyModel> target = new TreeDropTarget<IMyModel>(mytree);
target.setAllowSelfAsSource(true);
target.setAllowDropOnLeaf(true);
target.setFeedback(DND.Feedback.BOTH);
target.addDropHandler(new DndDropEvent.DndDropHandler()
{
@Override
public void onDrop(final DndDropEvent event)
{
IMyModel dragged = mytree.getSelectionModel().getSelectedItem();

// TODO get the drop target element!
}
});

[dreadnaxt]

Hello! Any news on this problem? We're trying to find solution now as well. The old way of getting node element by DNDEvent.getTarget() is not working any more. getTarget() on DNDMoveHandler just returns root parent of the Tree widget.

[Colin Alworth]

The code in TreeDropTarget that looks at the current OnMouseMove event and tries to decide where the mouse is currently hovering is in TreeDropTarget.showFeedback. Specifically, this line:

final TreeNode<M> item = getWidget().findNode(
        event.getDragMoveEvent().getNativeEvent().getEventTarget().<Element> cast());

The TreeNode them is the Tree's representation of the model and dom, so using that should be enough to get the item that was dropped on. Note that getWidget() here returns the Tree<M> instance.

This method, showFeedback, is also the result of DndMoveEvent, so this seems as though it should work in your case correctly.

[dreadnaxt]

Hey!

Thank you, this worked. But how can we know if releasing the mouse would cause an APPEND or INSERT operation? We want to cancel the event only in specific cases.

Thanks in advance

[dreadnaxt]

Seems that you don't have such method? It would be usefull it some cases. For now we overrided handleAppend and handleInsert with some extra logic.

[MickeyMiner]

Hi,

Please one more time for the "slower ones"...
How do I find the item on which the mouse was released?
And did the user want to drop the item before or after this item? Where is the cursor?

            @Override
            public void onDrop(DndDropEvent event) {
                MyModel dropped = ???????;
                boolean droppedAfterItem = ???????;
                Info.display("Droped: ", dropped.getId() + " " + droppedAfterItem);
            }

Thank you!

[Colin Alworth]

DndDropEvent has a getter 'getDragEndEvent' which returns a DragEndEvent, representing the end of the drag - you can get the x and y values there, the element where the user started the drag, and the native event itself, which contains the element you are currently over.

Element itemDroppedOnElement = event.getDragEndEvent().getNativeEvent().getEventTarget()

For more details on how to turn _that_ into an item, check out the Tree API, which has a few methods to turn dom elements into data (see Tree.findNode(Element) and TreeNode<N>.getModel()). You can use the x,y values mentioned above (along with the size of the element that was dropped on) to try to decide if they inserted before or after.

Also, consider using the Tree drag source and drop target classes - they are designed to do this work for you. Additionally, you can listen to the TreeStore for add and remove events to see what changes in there instead of focusing on dom manipulation.

[MickeyMiner]

Thank you, that had worked!
...and you are right. Focusing on store modifications is a better approach.

For cleanness sake:

@Override
public void onDrop(DndDropEvent event) {
    Element itemDroppedOnElement = (Element) event.getDragEndEvent().getNativeEvent().getEventTarget().cast();
    MyModel dropped = tree.findNode(itemDroppedOnElement).getModel();
    Info.display("Dropped on:", dropped.toString());
}

Thank you.
m.