You are viewing a plain text version of this content. The canonical link for it is here.

Posted to users@wicket.apache.org by armandoxxx <ar...@dropchop.com> on 2010/11/09 14:07:46 UTC

Wicket JQuery drag and drop behaviors

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 <ar...@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 <ar...@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-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org