Can it automatically detect which draggable dropped on droppable landing spot?
** Martin 2010/11/9 armandoxxx <armando....@dropchop.com>: > > 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 > > --------------------------------------------------------------------- To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org For additional commands, e-mail: users-h...@wicket.apache.org