draggable contentpanel

[danutzdobrescu]

hi.. i've got a little problem..
I've got two draggable contentpanels. how can i see if a contentpanel is hovering the other contentpanel when it's beeing dragged?

i've got just these methods:

@Override
public void dragCancel(DragEvent de)
{
// TODO Auto-generated method stub
super.dragCancel(de);
}

@Override
public void dragEnd(DragEvent de)
{
// TODO Auto-generated method stub
super.dragEnd(de);
}

@Override
public void dragMove(DragEvent de)
{
// TODO Auto-generated method stub
super.dragMove(de);
System.out.println(de.source);

}

@Override
public void dragStart(DragEvent de)
{
// TODO Auto-generated method stub
super.dragStart(de);
}



, but no dragenter...

if i make new dragSource(contentpanel1), and dropTarget(contentpanel2),
i see when the panel is hovering the other panel, but i can't really move the panel..

if i leave new Draggable(contentpanel1), and new Draggable(contentpanel1) and then i write new dragSource(contentpanel1), and dropTarget(contentpanel2)

after i release the mouse i see the proxy, and then i have to click again to release the panel...

do you have any idea of how can i make this work? :((

[danutzdobrescu]

ok..i guess that nobody understood what i'm trying to do...

i have this piece of code, but i can't manage to move the "folders"... the contentpanels ..

package webdesktop.core.client.Folder;

import org.cobogw.gwt.user.client.Color;
import org.cobogw.gwt.user.client.ui.RoundedPanel;

import webdesktop.core.client.index;
import webdesktop.core.client.Window.Desktop;

import com.extjs.gxt.ui.client.Events;
import com.extjs.gxt.ui.client.dnd.DragSource;
import com.extjs.gxt.ui.client.dnd.DropTarget;
import com.extjs.gxt.ui.client.dnd.DND.Feedback;
import com.extjs.gxt.ui.client.dnd.DND.Operation;
import com.extjs.gxt.ui.client.event.BaseEvent;
import com.extjs.gxt.ui.client.event.BoxComponentEvent;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.DNDEvent;
import com.extjs.gxt.ui.client.event.DNDListener;
import com.extjs.gxt.ui.client.event.DragEvent;
import com.extjs.gxt.ui.client.event.DragListener;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.fx.Draggable;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.custom.Portal;
import com.extjs.gxt.ui.client.widget.custom.Portlet;
import com.extjs.gxt.ui.client.widget.form.LabelField;
import com.extjs.gxt.ui.client.widget.layout.TableLayout;
import com.google.gwt.user.client.ui.Image;

public class Folder extends ContentPanel {

Draggable DD;
Image icon;
Label label;
String iconURL;
TableLayout tableLayout;
RoundedPanel roundedPanel;
ContentPanel contentPanel;
Desktop parentContainer = index.desktop;

public Folder(String label, int left, int top, int width, int height) {

super();

this.setTitle(label);
this.setPosition(left, top);
this.setWidth(width);
this.setAutoHeight(true);
this.setFrame(false);
this.setHeaderVisible(false);
this.setFooter(false);
this.disableTextSelection(true);
this.setId(label);

this.sinkEvents(Events.OnMouseMove);
this.sinkEvents(Events.DragEnter);
this.sinkEvents(Events.DragStart);




this.icon = new Icon();

this.label = new Label(label);


this.contentPanel = new Container("navy", this.height);
this.roundedPanel = new RoundedPanel(RoundedPanel.ALL, 5);
this.roundedPanel.setCornerColor(Color.NAVY);

this.setContextMenu(new ContextMenu());

this.contentPanel.add(this.icon);
this.contentPanel.add(this.label);
this.roundedPanel.add(this.contentPanel);
this.add(this.roundedPanel);

// this.setDD(new Draggable(this, this));
//
// this.getDD().setUseProxy(true);
// this.getDD().setConstrainClient(true);
//

DropTarget dt = new DropTarget(this);
DragSource ds = new DragSource(this);

DNDListener dnd = new DNDListener(){

@Override
public void dragDrop(DNDEvent e)
{
// TODO Auto-generated method stub
super.dragDrop(e);
System.out.println("dropped");
}

@Override
public void dragEnter(DNDEvent e)
{
// TODO Auto-generated method stub
super.dragEnter(e);
System.out.println("ko");;
}

@Override
public void dragLeave(DNDEvent e)
{
// TODO Auto-generated method stub
super.dragLeave(e);
}

@Override
public void dragMove(DNDEvent e)
{
// TODO Auto-generated method stub
e.status.setStatus(true);

super.dragMove(e);
}

@Override
public void dragStart(DNDEvent e)
{
// TODO Auto-generated method stub
super.dragStart(e);
}

@Override
public void handleEvent(DNDEvent e)
{
// TODO Auto-generated method stub
super.handleEvent(e);
}

};

ds.addDNDListener(dnd);
dt.addDNDListener(dnd);
ds.setData(this);
dt.setOperation(Operation.COPY);
System.out.println(ds.getDraggable().getDragWidget().getId());





}

public void select() {



if (index.desktop.getSelectedFolder() != null) {
index.desktop.getSelectedFolder().unSelect();
}


this.contentPanel.removeStyleName(this.contentPanel.getStyleName());
this.contentPanel.addStyleName("selectedFolder");
this.roundedPanel.setCornerColor(Color.NAVY);
index.desktop.setSelectedFolder(this);
this.label.setStyleAttribute("color", "white");
this.label.maximize();

}

public void unSelect() {

this.contentPanel.removeStyleName(this.contentPanel.getStyleName());
this.contentPanel.addStyleName("unSelectedFolder");

this.roundedPanel.setCornerColor(Color.TRANSPARENT);
index.desktop.setSelectedFolder(null);
this.label.setStyleAttribute("color", "navy");
this.label.minimize();

}

public void destroy() {
this.removeAllListeners();
this.removeAll();
this.removeFromParent();
}

public Draggable getDD() {
return DD;
}

public void setDD(Draggable dd) {
DD = dd;
}

public Image getIcon() {
return icon;
}

public void setIcon(Image icon) {
this.icon = icon;
}

public String getIconURL() {
return iconURL;
}

public void setIconURL(String iconURL) {
this.iconURL = iconURL;
this.icon.setUrl(iconURL);
}

public LabelField getLabel() {
return label;
}

public void setLabel(Label label) {
this.label = label;
}

@Override
protected void afterRender() {
// TODO Auto-generated method stub
super.afterRender();

Folder selectedFolder = null;

select();

super.addListener(Events.OnMouseDown, new Listener<BaseEvent>() {

public void handleEvent(BaseEvent be) {

boolean isRightClick;
isRightClick = ((BoxComponentEvent) be).isRightClick();
select();

}

});



}

}

[sven]

Take a look at the samples:

http://extjs.com/explorer/#basic

It is almost copy and paste of the code you find there.

[danutzdobrescu]

ok.. you were right, thanks. i've put a setposition(e.getClientX(),e.getClientY()) for the dragdrop event, and i've moved the panel.. the problem is that i've got that status and i just wanna get rid of it, because my idea is to make the movement to be like the one when the panel is Draggable, but to use the dragSource and dragTarget, because in this way i can override the events...

[danutzdobrescu]

ok... now i have another problem... i've managed to do something:


DropTarget dt = new DropTarget(this);
DragSource ds = new DragSource(this);
ds.setData("");
ds.getDraggable().setMoveAfterProxyDrag(true);
ds.getDraggable().setSizeProxyToSource(true);
ds.getDraggable().setUseProxy(false);


ds.setGroup("folder");
dt.setGroup("folder");



DNDListener dnd = new DNDListener()
{

@Override
public void dragEnter(DNDEvent e)
{
// TODO Auto-generated method stub
e.status.setStatus(true);
super.dragEnter(e);
Info.display("info", "over"+e.component.getId());




}

@Override
public void dragDrop(DNDEvent e)
{
// TODO Auto-generated method stub
super.dragDrop(e);
}

@Override
public void dragLeave(DNDEvent e)
{
// TODO Auto-generated method stub
super.dragLeave(e);
}

@Override
public void dragMove(DNDEvent e)
{
// TODO Auto-generated method stub
super.dragMove(e);

}

@Override
public void dragStart(DNDEvent e)
{
// TODO Auto-generated method stub

super.dragStart(e);
}

@Override
public void handleEvent(DNDEvent e)
{
// TODO Auto-generated method stub
super.handleEvent(e);
}

};

ds.addDNDListener(dnd);
dt.addDNDListener(dnd);



where this is a ContentPanel instance...

But when i panel is hovering another panel, nothing happens... the target does no receive the event when the other panel is on top of it.. I've seen that the target is capturing the dragEnter event only when the mouse cursor is on top of it...
any ideas? heeelp :((