Drag and Drop :)

Encontré una librería muy piola desarrollada por Fred Sauer que permite tener widgets "draggables" en nuestras aplicaciones.


Link al proyecto hosteado en google code: http://code.google.com/p/gwt-dnd/


Abajo tiene un ejemplo que hice usando FlowPanels, no se quejen de los estilos :) 



     El código...

package ar.com.gwt.dnd.client;

import com.allen_sauer.gwt.dnd.client.PickupDragController;
import com.allen_sauer.gwt.dnd.client.drop.FlowPanelDropController;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.AbsolutePanel;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.FocusPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;

/**
 * Drag and drop example
 * 
 * @author Cristian
 */
public class GWTDnD implements EntryPoint {
	
	private static final String CSS_DEMO_FLOW_PANEL_EXAMPLE_DRAGGABLE = "demo-FlowPanelExample-draggable";
	private static final String CSS_DEMO_FLOW_PANEL_EXAMPLE_LABEL = "demo-FlowPanelExample-label";

	PickupDragController dragController;

	public void onModuleLoad() {
		
		AbsolutePanel abs = new AbsolutePanel();
		FlowPanel panel = new FlowPanel();
		panel.setStyleName(CSS_DEMO_FLOW_PANEL_EXAMPLE_DRAGGABLE);

		dragController = new PickupDragController(abs, false);

		// Building minitabs
		for (int i = 1; i < 7; i++) {

			FlowPanel flowPanel = new FlowPanel();
			FocusPanel focusPanel = new FocusPanel();
			Label label = new Label("Cris' Minitab #" + String.valueOf(i));
			label.addStyleName(CSS_DEMO_FLOW_PANEL_EXAMPLE_LABEL);
			flowPanel.add(buildObject(label));

			focusPanel.add(flowPanel);
			makeDraggable(focusPanel, label);
			panel.add(focusPanel);

		}

		//Registering drop controller
		FlowPanelDropController flowPanelDropController = new FlowPanelDropController(panel);
		dragController.registerDropController(flowPanelDropController);

		abs.add(panel);
		RootPanel.get("mainContainer").add(abs, 10, 10);

	}

	/**
	 * Builds the object to drag
	 * @param header
	 * @return
	 */
	public VerticalPanel buildObject(Label header) {

		VerticalPanel panel = new VerticalPanel();
		panel.add(header);
		panel.setStyleName(CSS_DEMO_FLOW_PANEL_EXAMPLE_DRAGGABLE);
		
		return panel;

	}
		
	/**
	 * Makes a widget draggable
	 * @param draggable
	 * @param dragHandle
	 */
	public void makeDraggable(Widget draggable, Widget dragHandle) {

		dragController.makeDraggable(draggable, dragHandle);

	}

}

     Un par de estilos...

.demo-FlowPanelExample-draggable {
  padding: 0.5em;
  margin: 0.5em;
  border: 1px solid blue;
  background-color: #B3FF87;
}

.demo-FlowPanelExample-draggable ,
.demo-FlowPanelExample-draggable DIV {
  display: inline-block;
}

.demo-FlowPanelExample-label {
  font-size: 1.2em;
  line-height: 1.3em;
}

El ejemplo completo lo pueden descargar de acá

Saludos.. :)