1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    6
    Vote Rating
    0
    nakhli is on a distinguished road

      0  

    Exclamation Unanswered: Detect drop target node in a tree

    Unanswered: Detect drop target node in a tree


    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!
    }
    });

  2. #2
    Sencha User
    Join Date
    Jul 2011
    Posts
    15
    Vote Rating
    0
    dreadnaxt is on a distinguished road

      0  

    Default


    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.

  3. #3
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,732
    Answers
    109
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    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:

    Code:
    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.

  4. #4
    Sencha User
    Join Date
    Jul 2011
    Posts
    15
    Vote Rating
    0
    dreadnaxt is on a distinguished road

      0  

    Default


    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

  5. #5
    Sencha User
    Join Date
    Jul 2011
    Posts
    15
    Vote Rating
    0
    dreadnaxt is on a distinguished road

      0  

    Default


    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.

  6. #6
    Sencha User
    Join Date
    Dec 2007
    Posts
    57
    Vote Rating
    1
    MickeyMiner is on a distinguished road

      0  

    Default


    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?

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

  7. #7
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,732
    Answers
    109
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    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.

    Code:
    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.

  8. #8
    Sencha User
    Join Date
    Dec 2007
    Posts
    57
    Vote Rating
    1
    MickeyMiner is on a distinguished road

      0  

    Default


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

    For cleanness sake:
    Code:
    @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.