Hey
Just needed this so I wrote a simple implementation of Drag and Drop for
JQuery javascript lib.
So if anyone needs it .. be my guest to comment (and/or diSS) on it
Put on your page, app or anywhere else cause you need this !!!
<wicket:head>
<wicket:link><link rel="stylesheet" type="text/css"
href="css/jquery/smoothness/jquery-ui-1.8.2.custom.css" /></wicket:link>
<wicket:link><script type="text/javascript"
src="js/jquery-1.4.3.min.js"></script></wicket:link>
<wicket:link><script type="text/javascript"
src="js/jquery-ui-1.8.2.custom.min.js"></script></wicket:link>
</wicket:head>
DraggableBehavior.java
/**
*
*/
package org.dropchop.jop.dnd.behaviors.draggable;
import java.util.HashMap;
import java.util.Map;
import org.apache.wicket.Component;
import org.apache.wicket.behavior.AbstractAjaxBehavior;
import org.apache.wicket.markup.html.CSSPackageResource;
import org.apache.wicket.markup.html.IHeaderResponse;
import org.apache.wicket.util.template.PackagedTextTemplate;
import org.apache.wicket.util.template.TextTemplate;
import org.dropchop.jop.dnd.behaviors.droppable.DroppableBehavior;
/**
* @author armando <armando[DoT]ota[At]dropchop[DoT]com>
*
*/
public class DraggableBehavior extends AbstractAjaxBehavior {
private static final long serialVersionUID = -4879330165262306147L;
//JQuery options
private DragType dragType = DragType.ORIGINAL;
/**
* Drag type for jQuery helper.
* CLONE - clones panel and after panel is droped cloned panel
dissapears.
* ORIGINAL - moves the original panel through the page.
* @author armando <armando....@dropchop.com>
*/
public enum DragType {
ORIGINAL("original"), CLONE("clone");
private String type = null;
/**
* Private constructor.
* @param theType jquery constant string
*/
private DragType(final String theType) {
this.type = theType;
}
/**
* Gets JQuery drag type constant.
* @return string.
*/
public String getType() {
return this.type;
}
}
/**
* Sets drag type for draggable component
* @param theType
* @return reference to itself for chaining.
*/
public DraggableBehavior setDragType(final DragType theType) {
this.dragType = theType;
return this;
}
@Override
public void renderHead(final IHeaderResponse theResponse) {
super.renderHead(theResponse);
theResponse.renderOnDomReadyJavascript(this.getJavaScriptCode(this.getComponent()));
}
@Override
protected void onBind() {
getComponent().setOutputMarkupId(true);
//uncomment this if you need styles for draggable component!
//getComponent().add(CSSPackageResource.getHeaderContribution(DroppableBehavior.class,
"css/styles.css"));
}
/**
* Uses js file as a template and returns parsed output.
*
* @param theComponentId id of date time field component.
* @return javascript code string.
*
* Note: this might be a performance issue ... figure and test it
out!!!
*/
private String getJavaScriptCode(final Component theComponent) {
PackagedTextTemplate template = new
PackagedTextTemplate(getClass(),
"js/DraggableBehavior.js", "text/javascript");
Map<String, Object> params = new HashMap<String, Object>();
params.put("componentId", theComponent.getMarkupId());
params.put("helper", this.dragType.getType());
params.put("wicketPath", theComponent.getPageRelativePath());
TextTemplate interpolated = template.interpolate(params);
return interpolated.asString();
}
/* (non-Javadoc)
* @see org.apache.wicket.behavior.IBehaviorListener#onRequest()
*/
@Override
public void onRequest() {}
}
DraggableBehavior.js << servers as a template for javascript code
$("#${componentId}").draggable(
{
cursor : 'pointer',
helper : '${helper}'
}
);
$('#${componentId}').data('wicketPath', '${wicketPath}');
DroppableBehavior.java
package org.dropchop.jop.dnd.behaviors.droppable;
import java.util.HashMap;
import java.util.Map;
import org.apache.wicket.Component;
import org.apache.wicket.Request;
import org.apache.wicket.RequestCycle;
import org.apache.wicket.ajax.AbstractDefaultAjaxBehavior;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.html.CSSPackageResource;
import org.apache.wicket.markup.html.IHeaderResponse;
import org.apache.wicket.protocol.http.WebRequestCycle;
import org.apache.wicket.util.template.PackagedTextTemplate;
import org.apache.wicket.util.template.TextTemplate;
/**
* Implementation of droppable behavior with for JQuery javascript lib.
*
* TODO:
* - add accepting components
*
*
* @author armando <armando....@dropchop.com>
*/
public class DroppableBehavior extends AbstractDefaultAjaxBehavior {
private static final long serialVersionUID = -776491653073255595L;
@Override
public void renderHead(final IHeaderResponse theResponse) {
super.renderHead(theResponse);
theResponse.renderOnDomReadyJavascript(this.getJavaScriptCode(this.getComponent().getMarkupId()));
}
/* (non-Javadoc)
* @see
org.apache.wicket.ajax.AbstractDefaultAjaxBehavior#respond(org.apache.wicket.ajax.AjaxRequestTarget)
*/
@Override
protected void respond(final AjaxRequestTarget theTarget) {
Request request = getComponent().getRequest();
Map<String, ?> map = ((WebRequestCycle)
RequestCycle.get()).getRequest().getParameterMap();
String[] paths = (String[])map.get("wicketPath");
if (paths != null) {
for(int i=0; i < paths.length; i++) {
Component cmp = request.getPage().get(paths[i]);
this.beforeDrop(theTarget, cmp);
this.onDrop(theTarget, cmp);
this.afterDrop(theTarget, cmp);
}
}
}
@Override
protected void onBind() {
getComponent().setOutputMarkupId(true);
// uncomment this row if you need styling for droppable
component
//getComponent().add(CSSPackageResource.getHeaderContribution(DroppableBehavior.class,
"css/styles.css"));
}
/**
* Notification method before onDrop() is called.
* @param theComponent reference to component that was dropped.
*/
protected void beforeDrop(final AjaxRequestTarget theTarget, final
Component theComponent) {
}
/**
* Notification method that a drop happened on this component.
* @param theComponent reference to dropped component.
*/
protected void onDrop(final AjaxRequestTarget theTarget, final Component
theComponent) {
System.out.println("Dropped:" +
theComponent.getClass().getName());
}
/**
* Notification method after onDrop() is called.
* @param theComponent reference to dropped component.
*/
protected void afterDrop(final AjaxRequestTarget theTarget, final
Component
theComponent) {
}
/**
* Uses js file as a template for javascript code and returns parsed
output.
*
* @param theComponentId id of date time field component.
* @return javascript code string.
*
* Note: this might be a performance issue ... figure and test it
out!!!
*/
private String getJavaScriptCode(final String theComponentId) {
PackagedTextTemplate template = new
PackagedTextTemplate(getClass(),
"js/DropableBehavior.js", "text/javascript");
Map<String, Object> params = new HashMap<String, Object>();
params.put("componentId", theComponentId);
params.put("callbackUrl", getCallbackUrl());
TextTemplate interpolated = template.interpolate(params);
return interpolated.asString();
}
}
DroppableBehavior.js << Serves as a template for javascript code
$('#${componentId}').droppable(
{
drop: function(event, ui) {
wicketAjaxGet('${callbackUrl}&wicketPath=' +
ui.draggable.data('wicketPath'));
}
}
);
Regards
Armando
--
View this message in context:
http://apache-wicket.1842946.n4.nabble.com/Wicket-JQuery-drag-and-drop-behaviors-tp3033676p3033676.html
Sent from the Users forum mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org
