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

wicket-jquery-ui/wicket-jquery-ui/src/main/java/com/googlecode/wicket/jquery/ui/interaction/droppable/DroppableBehavior.java

Line 130 in 2df5276

this.listener.onDrop(target, this.draggable);

I see that the passed component is this.draggable, which is set at

wicket-jquery-ui/wicket-jquery-ui/src/main/java/com/googlecode/wicket/jquery/ui/interaction/draggable/DraggableBehavior.java

Line 183 in 337ef22

behavior.setDraggable(DraggableBehavior.this.component);

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