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

Reply via email to