Buy me a coffee :)

Wicket - jQuery UI

jQuery UI integration in Wicket 6.x, Wicket 7.x , Wicket 8.x & Wicket 9.x

Draggable & Droppable Components

Drop here - green area
Drop here - blue area

Components / Samples



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


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
To be able to use it, you need to change the ResourceReference with kendo.all.min.js

See also



  • 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");

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

	public void renderHead(IHeaderResponse 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;

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

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

			public void onDrop(AjaxRequestTarget target, Component component)
				if (component != null)
					String message = String.format("%s dropped in %s", component.getDefaultModelObjectAsString(), this.getModelObject());, message);
<!DOCTYPE html>
<html xmlns:wicket="">
	<title>Wicket - Kendo UI: droppable</title>
	<div id="demo-panel">
		<div wicket:id="droppable1" class="droppable" style="background-color: #9fc;">
			<span>Drop here - green area</span>
		<div wicket:id="droppable2" class="droppable" style="background-color: #9cf;">
			<span>Drop here - blue area</span>
		<div wicket:id="draggable" class="draggable">
	<br class="clear-both"/>
	<div wicket:id="console"></div>
#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;