Wicket - Kendo UI: droppable

Draggable & Droppable Components

Drop here - green area

Drop here - blue area

Draggable

Components / Samples

Description

Since

wicket-kendo-ui-kendo-6.20.0 wicket-kendo-ui-kendo-7.0.0

Licensing

Kendo UI "Core" is Apache License 2.0 licensed, starting from version 2014.1.416.
Prior to version 2014.1.416, Kendo UI "Web" was licensed under GPLv3.

A pro version - with a commercial license - is also available, it provides additional widgets (see http://docs.telerik.com/kendo-ui/intro/supporting/list-of-widgets)
To be able to use it, you need to change the ResourceReference with kendo.all.min.js

Sources

Java
HTML
CSS

package com.googlecode.wicket.jquery.ui.samples.kendoui.dragdrop;

import org.apache.wicket.Component;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.head.IHeaderResponse;
import org.apache.wicket.model.Model;

import com.googlecode.wicket.jquery.core.resource.StyleSheetPackageHeaderItem;
import com.googlecode.wicket.kendo.ui.console.Console;
import com.googlecode.wicket.kendo.ui.interaction.draggable.Draggable;
import com.googlecode.wicket.kendo.ui.interaction.droppable.Droppable;

public class ComponentDragDropPage extends AbstractDragDropPage
{
	private static final long serialVersionUID = 1L;

	private final Console console;

	public ComponentDragDropPage()
	{
		// console //
		this.console = new Console("console");
		this.add(this.console);

		// draggable //
		this.add(new Draggable<String>("draggable", Model.of("Draggable")));

		// droppable //
		this.add(this.newDroppable("droppable1", "green area"));
		this.add(this.newDroppable("droppable2", "blue area"));
	}

	// Methods //

	@Override
	public void renderHead(IHeaderResponse response)
	{
		super.renderHead(response);

		response.render(new StyleSheetPackageHeaderItem(ComponentDragDropPage.class));
	}

	// Factories //

	/**
	 * Gets a new Droppable.<br>
	 * By default 'drag-enter' and 'drag-leave' events are disabled to minimize client/server round-trips.
	 */
	private Droppable<String> newDroppable(String id, String color)
	{
		return new Droppable<String>(id, Model.of(color)) {

			private static final long serialVersionUID = 1L;

			@Override
			public void onDragEnter(AjaxRequestTarget target, Component component)
			{
				// should override #isDragEnterEventEnabled(), returning true, for this event to be triggered.
			}

			@Override
			public void onDragLeave(AjaxRequestTarget target, Component component)
			{
				// should override #isDragLeaveEventEnabled(), returning true, for this event to be triggered.
			}

			@Override
			public void onDrop(AjaxRequestTarget target, Component component)
			{
				if (component != null)
				{
					String message = String.format("%s dropped in %s", component.getDefaultModelObjectAsString(), this.getModelObject());
					console.info(target, message);
				}
			}
		};
	}
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<wicket:head>
	<title>Wicket - Kendo UI: droppable</title>
</wicket:head>
</head>
<body>
<wicket:extend>
	<div id="demo-panel">
		<div wicket:id="droppable1" class="droppable" style="background-color: #9fc;">
			<span>Drop here - green area</span>
		</div>
		<div wicket:id="droppable2" class="droppable" style="background-color: #9cf;">
			<span>Drop here - blue area</span>
		</div>
		<div wicket:id="draggable" class="draggable">
			<span>Draggable</span>
		</div>
	</div>
	<br class="clear-both"/>
	<div wicket:id="console"></div>
</wicket:extend>
</body>
</html>

#wrapper-panel-frame {
	height: 256px;
}

.draggable {
	float: left;
	cursor: move;
	width: 92px;
	height: 64px;
	margin: 1em;
	padding: 1em;
	border-radius: .5em;
	background-color: orange;
}

.droppable {
	float: right;
	left: 300px;
	width: 128px;
	height: 128px;
	margin: 1em;
	padding: 1em;
	border-radius: 1em;
}

.console {
	height: 128px;
}

/* class of the element being dragged */
.kendoDraggable-clone {
	border: 2px solid gray;
}

/* class added on the original element */
.kendoDraggable-hide {
	display: none;
}