Buy me a coffee :)

Wicket - jQuery UI

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

Draggable Behavior, with options

Drag me horizontally

Components / Samples

Description

This sample shows how to use the 'draggable' behavior, with options

Sources

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

import org.apache.wicket.markup.head.IHeaderResponse;
import org.apache.wicket.markup.html.WebMarkupContainer;

import com.googlecode.wicket.jquery.core.resource.StyleSheetPackageHeaderItem;
import com.googlecode.wicket.jquery.ui.interaction.draggable.DraggableAdapter;
import com.googlecode.wicket.jquery.ui.interaction.draggable.DraggableBehavior;

public class BehaviorOptionDraggablePage extends AbstractDraggablePage
{
	private static final long serialVersionUID = 1L;

	public BehaviorOptionDraggablePage()
	{
		DraggableBehavior behavior = this.newDraggableBehavior();
		behavior.setOption("axis", "'x'");
		behavior.setOption("containment", "'#wrapper-panel-frame'");

		WebMarkupContainer container = new WebMarkupContainer("draggable");
		container.add(behavior);

		this.add(container);
	}

	// Methods //

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

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

	// Factories //

	private DraggableBehavior newDraggableBehavior()
	{
		return new DraggableBehavior(new DraggableAdapter());
	}
}
<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<wicket:head>
	<title>Wicket jQuery UI: draggable, with options</title>
</wicket:head>
</head>
<body>
<wicket:extend>
	<div id="demo-panel">
		<div wicket:id="draggable" class="ui-widget-content">
			<p>Drag me horizontally</p>
		</div>
	</div>
</wicket:extend>
</body>
</html>
.ui-draggable {
	width: 130px;
	height: 60px;
	padding: 0.5em;
	z-index: 99;
}