Did you take a look at jWicket 
(http://wicket-stuff.svn.sourceforge.net/svnroot/wicket-stuff/trunk/wicketstuff-core/jdk-1.5-parent/jwicket-parent/jwicket-ui/jwicket-ui-dragdrop)?

-----Urspr√ľngliche Nachricht-----
Von: armandoxxx [mailto:armando....@dropchop.com] 
Gesendet: Dienstag, 9. November 2010 14:08
An: users@wicket.apache.org
Betreff: 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 <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