Problem with multiple Droppables

[VaclavC]

I have multiple droppable in my page. When I drag something to any of them, only the last one receives the payload. I have created a simple demo:

https://github.com/VaclavC/Test-MultipleDroppables

Here is the page:

https://github.com/VaclavC/Test-MultipleDroppables/blob/master/src/main/java/com/disnel/test/MultipleDroppables.java

When I try to drag "Drag source" and drop it on "Droppable 1", onDrop on Droppable 2 is called. And three times...

[sebfz1]

Hi, I will try to look at this asap! Thanks for the quickstart!

[sebfz1]

About the Droppable not receiving correctly the Draggable, it seems that the hardcoded html-id cause an issue here. So I removed it:

<div id="DragSource" wicket:id="DragSource">Drag source</div>

<div wicket:id="Droppable1">Droppable 1</div>
<div wicket:id="Droppable2">Droppable 2</div>

About the droppable receiving 3 events, it is due to the selector "*". An easy way to solve this is to use the Droppable component rather than the Behavior:

add(new WebMarkupContainer("DragSource").add(new DraggableBehavior(new DraggableAdapter())));
// eq to: add(new Draggable<Void>("DragSource"));

add(new Droppable<Void>("Droppable1") {
    private static final long serialVersionUID = 1L;

    @Override
    public void onDrop(AjaxRequestTarget target, Component component) {
        System.out.println("Drop 1");
    }
});

add(new Droppable<Void>("Droppable2") {

    private static final long serialVersionUID = 1L;

    @Override
    public void onDrop(AjaxRequestTarget target, Component component) {
        System.out.println("Drop 2");
    }
});

[VaclavC]

Have tried it and the problem is somewhere in DroppableBehavior. With Droppable, it works regardless of an id in HTML. There was a mistake, both droppables had the same html id :-/.

But with DropabbleBehavior it does not work even without id in HTML.