Drag N Drop Example

[Travis]

This is a widget I have created for an app we are writting. You can
select Items by dragging them between panels. This has been tested in
Firefox and IE. If you have any ideas to make this better, please let
me know.

Thanks
Travis

import com.google.gwt.user.client.ui.Label;

public class DragWidget extends Label {
public boolean selected;
public Object value;

public DragWidget(String label, Object value, boolean selected){
super(label);
this.value = value;
this.selected = selected;
}

public DragWidget(DragWidget drag){
super(drag.getText());
this.selected = drag.selected;
this.value = drag.value;
}
}

import com.google.gwt.user.client.ui.*;

public class DragSelectWidget extends Composite {

private final VerticalPanel fromPanel = new VerticalPanel();
private final VerticalPanel toPanel = new VerticalPanel();
private DragWidget dragWidgets[];
private final DockPanel outer = new DockPanel();
private PopupPanel dragPanel;
private DragWidget dragWidget;
private MouseListener dragListener = new DragListener();

public DragSelectWidget(){
draw();
}

public DragSelectWidget(DragWidget[] widgets){
draw();
setDragWidgets(widgets);
}

private void draw(){
setWidget(outer);
outer.add(fromPanel,DockPanel.WEST);
outer.add(toPanel, DockPanel.EAST);
fromPanel.setStyleName("DragContainer");
toPanel.setStyleName("DragContainer");
outer.setCellHorizontalAlignment(fromPanel,HasAlignment.ALIGN_LEFT);
outer.setCellHorizontalAlignment(toPanel, HasAlignment.ALIGN_RIGHT);
outer.setWidth("100%");
}

private void drop(int x, int y){
if(dragWidget != null && !dragWidget.selected){
int toLeft = toPanel.getAbsoluteLeft();
int toTop = toPanel.getAbsoluteTop();
if((x > toLeft && x < (toLeft + toPanel.getOffsetWidth())) &&
(y > toTop && y < (toTop + toPanel.getOffsetHeight()))) {
for(int i = 0; i < toPanel.getWidgetCount(); i++){
if(toPanel.getWidget(i) instanceof HTML) {
toPanel.remove(toPanel.getWidget(i));
DragWidget dropWidget = new DragWidget(dragWidget);
dropWidget.addMouseListener(dragListener);
dropWidget.selected = true;
toPanel.insert(dropWidget, i);
break;
}
}
dragWidget.removeMouseListener(dragListener);
dragWidget.setStyleName("DragItemInactive");
dragWidget.selected = true;
}
}
if(dragWidget != null && dragWidget.selected){
int fromLeft = fromPanel.getAbsoluteLeft();
int fromTop = fromPanel.getAbsoluteTop();
if((x > fromLeft && x < (fromLeft + fromPanel.getOffsetWidth())) &&
(y > fromTop && y < (fromTop + fromPanel.getOffsetHeight()))) {
for(int i = 0; i < fromPanel.getWidgetCount(); i++){
DragWidget fromWidget = (DragWidget)fromPanel.getWidget(i);
if(fromWidget.value == dragWidget.value) {
toPanel.remove(dragWidget);
toPanel.add(new HTML("&nbsp;"));
fromWidget.addMouseListener(dragListener);
fromWidget.removeStyleName("DragItemInactive");
fromWidget.selected = false;
break;
}
}
}
}
}

public DragWidget[] getDragWidgets(){
return dragWidgets;
}

public void setDragWidgets(DragWidget[] dragWidgets) {
this.dragWidgets = dragWidgets;
fromPanel.clear();
toPanel.clear();
for(int i=0; i < dragWidgets.length; i++){
fromPanel.add(dragWidgets[i]);
if(dragWidgets[i].selected){
DragWidget toWidget = new DragWidget(dragWidgets[i]);
toWidget.addMouseListener(dragListener);
toPanel.insert(toWidget,0);
dragWidgets[i].setStyleName("DragItemInactive");
}else{
dragWidgets[i].addMouseListener(dragListener);
toPanel.add(new HTML("&nbsp;"));
}
}
}

private class DragListener extends MouseListenerAdapter {

public int xpos;
public int ypos;
public boolean dragging;

public void onMouseDown(Widget sender, int x, int y){
xpos = x;
ypos = y;
dragPanel = new PopupPanel();
dragWidget = (DragWidget)sender;
HTML dragHTML = new HTML(dragWidget.getText());
dragHTML.addMouseListener(dragListener);
dragPanel.add(dragHTML);
dragging = true;
dragPanel.setPopupPosition(sender.getAbsoluteLeft(),sender.getAbsoluteTop());
dragPanel.show();
}

public void onMouseUp(Widget sender, int x, int y){
int absX = x + ((PopupPanel)sender.getParent()).getAbsoluteLeft();
int absY = y + ((PopupPanel)sender.getParent()).getAbsoluteTop();
drop(absX,absY);
dragging = false;
((PopupPanel)sender.getParent()).hide();
}

public void onMouseMove(Widget sender, int x, int y){
if (dragging) {
int absX = x +
((PopupPanel)sender.getParent()).getAbsoluteLeft();
int absY = y +
((PopupPanel)sender.getParent()).getAbsoluteTop();
((PopupPanel)sender.getParent()).setPopupPosition(absX - xpos,
absY - ypos);
}
}
}
}

The CSS:

.DragContainer {
border:1px solid black;
width:125px;
}
.DragItemInactive {
color:gray;
}

[hos...@gmail.com]

I am trying out your Drag N Drop example.. Do you have the html page?

--
jose

[Travis]

No where that I can make public. Here is some more example code
though.

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.DockPanel;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class testdrag implements EntryPoint {

/**
* This is the entry point method.
*/
public void onModuleLoad() {

DragWidget[] myWidgets = {new DragWidget("Item 1",new Integer(1),
true),
new DragWidget("Item 2",new Integer(2), false),
new DragWidget("Item 3",new Integer(3),
false)};

DragSelectWidget testDrag = new DragSelectWidget(myWidgets);
DockPanel myPanel = new DockPanel();
myPanel.setWidth("300px");
myPanel.add(testDrag, DockPanel.CENTER);
RootPanel.get("slot1").add(myPanel);
}
}

Here is HTML starter

<html>
<head>
<title>Wrapper HTML for TestDrag</title>
<style>
body,td,a,div,.p{font-family:arial,sans-serif;
-moz-user-select:none;}
div,td{color:#000000}
a:link,.w,.w a:link{color:#0000cc}
a:visited{color:#551a8b}
a:active{color:#ff0000}

.DragContainer {
border:1px solid black;
width:125px;
}

.DragItemInactive {
color:gray;
}
</style>
<meta name='gwt:module' content='edu.uiowa.uhl.inmsp.testdrag'>
</head>
<!-- If dragging Text Items it is best to disable text select.
This is done by the script in the body tag for IE and the -moz
directive in CSS for Mozilla -->
<body onload ="document.body.ondrag = function () { return false;
};document.body.onselectstart = function () { return false; };">
<script language="javascript" src="gwt.js"></script>

<h1>Drag Select Widget</h1>

<div id="slot1">
</body>
</html>

Hope this helps

Travis