Component is null in onDrop when dropped an item from Sortable

[VaclavC]

I have a Sortable in my page, which works seamlessly. What I want is to be able to drag an item from Sortable and drop it on Draggable. I can do it, but I don't receive component object into my droppable, component is null then. When I try to add a DraggableBehavior to Sortable items, drag works, I receive a Component in onDrop method, but Sortable stops working.

Why I receive null instead of component when I drag something from Sortable to Droppable?

[martin-g]

Please show us some of your code. Or even better - create a demo app!

[VaclavC]

Let start with the code, maybe I am doing something wrong and you will see it immediately.

Sortable:

    Options sortableOptions = new Options();
    sortableOptions.set("helper", "'clone'");
    sortableOptions.set("scroll", "false");
//  sortableOptions.set("axis", "'y'");
    sortableOptions.set("appendTo", "'body'");

    Sortable<Komponent> tree;
    add(tree = new Sortable<Komponent>("tree", listOfKomponentsModel, sortableOptions)
    {
        @Override
        protected HashListView<Komponent> newListView(IModel<List<Komponent>> model)
        {
            return new HashListView<Komponent>("item", model)
            {
                @Override
                protected void populateItem(ListItem<Komponent> item)
                {
                    ... some item children ...

//                  item.add(new DraggableBehavior(new DraggableAdapter()));
                }
            };
        }

        @Override
        public void onUpdate(AjaxRequestTarget target, Komponent k, int index)
        {
            super.onUpdate(target, k, index);

            send(getApplication(), Broadcast.BREADTH,
                    new KomponentChangedEvent(target, Model.of(k.getParent()), Change.CHILDREN_ORDER_CHANGED));
        }
    });

And receiver:

public MainPanel(String id, IModel<?> model)
{
    super(id, model);

    setOutputMarkupId(true);

    if ( canGrow() )
        add(new AttributeAppender("class", "canGrow", " "));

    if ( isDroppable() )
        add(new DroppableBehavior(JQueryWidget.getSelector(this), new DroppableAdapter()
        {
            @SuppressWarnings("unchecked")
            @Override
            public void onDrop(AjaxRequestTarget target, Component component)
            {
                if ( component != null )
                {
                    ... some action ...
                }
                else
                {
                    System.err.println("component is null!");
                }
            }
        }));
}

[martin-g]

It it not clear whether you use JQueryUI or KendoUI components.

Looking at https://github.com/sebfz1/wicket-jquery-ui/blob/2df5276cb9adcda8a698599ebdc431b2e81cac90/wicket-jquery-ui/src/main/java/com/googlecode/wicket/jquery/ui/interaction/droppable/DroppableBehavior.java#L130 I see that the passed component is this.draggable, which is set at https://github.com/sebfz1/wicket-jquery-ui/blob/337ef229d9cc9e36e26fa11789158eb976161af0/wicket-jquery-ui/src/main/java/com/googlecode/wicket/jquery/ui/interaction/draggable/DraggableBehavior.java#L183. Please put a breakpoint there and see why it is not set.

[VaclavC]

I'am using JQueryUI version.

It does not call DraggableBehavior.newDroppableBehaviorVisitor at all. But I don't have DraggableBehavior on Sortable items. If I put it there, dropping works, but Sortable stops working.

[VaclavC]

I have created a simple project: https://github.com/VaclavC/Test-SortNDrop

It prints "component: null" on stdout.

[sebfz1]

Well, the question to solve is how we can do it in pure jQuery UI? I spent some time trying to find relevant example, the closest I found is this one: http://bseth99.github.io/projects/jquery-ui/8-draggable-sortable-droppable.html But I need to better understand what the sample does exactly, and unfortunately my spare time is very limited... As soon as we get a simple working example in pure jQuery UI we will now how to solve this issue...

Here is my code for the moment (it does not works very well but I think it is a progress)

@Override
protected void onInitialize() {
    super.onInitialize();

    DraggableSortable draggableSortable = new DraggableSortable("sortable", items);
    add(draggableSortable);

    Component dropCont = new WebMarkupContainer("droptarget");
    add(dropCont);

    Options options = new Options();
    options.set("helper", Options.asString("clone"));
    options.set("connectToSortable", Options.asString(JQueryWidget.getSelector(draggableSortable)));

    dropCont.add(new DroppableBehavior(JQueryWidget.getSelector(dropCont), options, new DroppableAdapter() {

        private static final long serialVersionUID = 1L;

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

private static final class DraggableSortable extends Sortable<String> {
    private static final long serialVersionUID = 1L;

    private DraggableSortable(String id, List<String> list) {
        super(id, list);
    }

    @Override
    protected HashListView<String> newListView(IModel<List<String>> model) {

        return new HashListView<String>("item", model) {

            private static final long serialVersionUID = 1L;

            @Override
            protected void populateItem(ListItem<String> item) {
                item.add(new Label("content", item.getModelObject()));

                Options options = new Options();
                options.set("connectToSortable", Options.asString(JQueryWidget.getSelector(DraggableSortable.this)));
                item.add(new DraggableBehavior(options, new DraggableAdapter()));
            }
        };
    }
}

[VaclavC]

The proposed solution is hardly usable in my real application. Sortable is in another panel hierarchy than the target and they don't now about themselves.

I solved it by adding a separate Draggable into Sortable item for now. Then it works.