Buy me a coffee :)

Wicket - jQuery UI

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

Selectable, with draggable (on table rows)

Black Metal
Death Metal
Doom Metal
Folk Metal
Gothic Metal
Heavy Metal
Power Metal
Symphonic Metal
Trash Metal
Vicking Metal

Components / Samples





package com.googlecode.wicket.jquery.ui.samples.jqueryui.selectable;

import org.apache.wicket.Component;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.head.IHeaderResponse;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.image.ContextImage;
import org.apache.wicket.markup.html.list.ListItem;
import org.apache.wicket.markup.html.list.ListView;
import org.apache.wicket.markup.html.panel.FeedbackPanel;
import org.apache.wicket.model.PropertyModel;

import com.googlecode.wicket.jquery.core.resource.StyleSheetPackageHeaderItem;
import com.googlecode.wicket.jquery.ui.interaction.draggable.Draggable;
import com.googlecode.wicket.jquery.ui.interaction.droppable.Droppable;
import com.googlecode.wicket.jquery.ui.interaction.selectable.Selectable;
import com.googlecode.wicket.jquery.ui.interaction.selectable.SelectableDraggableFactory;
import com.googlecode.wicket.jquery.ui.panel.JQueryFeedbackPanel;

public class TableDraggableSelectablePage extends AbstractSelectablePage
	private static final long serialVersionUID = 1L;
	private final FeedbackPanel feedback;
	private final Selectable<Genre> selectable;

	public TableDraggableSelectablePage()
		// FeedbackPanel // = new JQueryFeedbackPanel("feedback");

		// Selectable //
		this.selectable = new Selectable<Genre>("selectable", GenresDAO.all()) {

			private static final long serialVersionUID = 1L;

			protected String getItemSelector()
				return "TR"; // Gets the selector that identifies the selectable item within the Selectable component

			public void onSelect(AjaxRequestTarget target)
			{"items: " + this.getDefaultModelObjectAsString());


		// Selectable ListView, with the default "empty" (ie: with no default icon) selectable-draggable factory //
		final SelectableDraggableFactory factory = new SelectableDraggableFactory();

		this.selectable.add(new ListView<Genre>("items", GenresDAO.all()) {

			private static final long serialVersionUID = 1L;

			protected void populateItem(ListItem<Genre> item)
				Genre genre = item.getModelObject();

				// Draggable (non styled container) //
				Draggable<?> draggable = selectable.createDraggable("drag", factory);
				draggable.add(new ContextImage("cover", new PropertyModel<String>(genre, "cover")));

				// Genre //
				item.add(new Label("name", new PropertyModel<String>(genre, "name")));

		// Droppable //
		Droppable<Genre> droppable = this.newDroppable("droppable");

		// Droppable ListView //
		droppable.add(new ListView<Genre>("items", this.selectable.getModel()) {

			private static final long serialVersionUID = 1L;

			protected void populateItem(ListItem<Genre> item)
				item.add(new ContextImage("cover", item.getModelObject().getCover()));

	// Methods //

	public void renderHead(IHeaderResponse response)

		response.render(new StyleSheetPackageHeaderItem(TableDraggableSelectablePage.class));

	// Factories //

	 * Gets a new Droppable.
	 * By default 'over' and 'exit' ('out') events are disabled to minimize client/server round-trips.
	private Droppable<Genre> newDroppable(String id)
		return new Droppable<Genre>(id) {

			private static final long serialVersionUID = 1L;

			public void onDrop(AjaxRequestTarget target, Component component)
				info(String.format("Dropped %s", selectable.getModelObject()));

				target.add(this); // refresh the listview
<!DOCTYPE html>
<html xmlns:wicket="">
	<title>Wicket jQuery UI: selectable (draggable/table)</title>
	<div class="ui-widget-content">
		<div wicket:id="droppable" class="ui-corner-all">
			<span wicket:id="items">
				<img wicket:id="cover" class="ui-corner-all" />
		<table wicket:id="selectable">
			<tr wicket:id="items">
				<td width="10%" height="">
					<div wicket:id="drag">
						<img wicket:id="cover" class="ui-corner-all" width="100%" />
				<td wicket:id="name" width="90%">[genre]</td>
		<div wicket:id="feedback"></div>
table {
	border-collapse: separate;
	border-spacing: 1px;

table td {
	padding: 1px;

.ui-droppable {
	width: 420px;
	height: 450px;
	padding: .5em;
	margin: .5em;
	float: right;
	background-color: #9cf;

.ui-selectable {
	height: 180px;
	margin: .5em;
	border: 1px solid #FECA40;

.ui-selecting {
	background: #FECA40;

.ui-selected {
	background: #F39814;
	color: white;