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
