Bug of DragSource&DropTarget in FireFox

[the_matrix22c]

Hi, DragSource and DropTarget have bugs in FireFox

Detailed description of the problem
The DragSource cannot be drag in firefox if the droptarget's layoutcontainer is set with RowLayout. It just only works for FitLayout and FlowLayout in FireFox. This bug is not found in IE.

- GXT version - gxt-2.0.1
- both Host mode & web mode
- Browser and version - Firefox/3.0.13
- Operating System - Windows XP
- Sample code

public class BasicDNDExample extends LayoutContainer {
private LayoutContainer master = new LayoutContainer();
private LayoutContainer container3 = new LayoutContainer();
private HorizontalPanel hp = new HorizontalPanel();
private LayoutContainer container = new LayoutContainer();

public BasicDNDExample() {
master.setLayoutOnChange(true);
master.setBorders(true);
master.setSize(200, 500);
master.setLayout(new FlowLayout());

hp.setLayout(new FlowLayout());
hp.setSpacing(10);
hp.setId("helloHP");
hp.setLayoutOnChange(true);

container.setLayoutOnChange(true);
container.setBorders(true);
container.setSize(200, 200);
container.setLayout(new FlowLayout());

container3.setLayoutOnChange(true);
container3.setBorders(true);
container3.setSize(200, 200);
container3.setLayout(new RowLayout(Style.Orientation.VERTICAL));


DropTarget target = new DropTarget(container) {
@Override
protected void onDragDrop(DNDEvent event) {
super.onDragDrop(event);
Html html = (Html) event.getData();
container.add(html);
}
};
target.setGroup("test");
target.setOverStyle("drag-ok");

DropTarget target2 = new DropTarget(container3) {
@Override
protected void onDragDrop(DNDEvent event) {
super.onDragDrop(event);
Html html = (Html) event.getData();
container3.add(html);
}
};
target2.setGroup("test");
target2.setOverStyle("drag-ok");


final LayoutContainer sourceContainer = new LayoutContainer();
sourceContainer.setLayoutOnChange(true);
sourceContainer.setWidth(100);

addSources(sourceContainer);



this.setLayout(new FitLayout());
hp.add(master);
hp.add(sourceContainer);
master.add(container);
master.add(container3);
add(hp);
}

private void addSources(LayoutContainer container) {
for (int i = 0; i < 5; i++) {
final Html html = new Html("Drag Me " + i);
html.setStyleAttribute("padding", "5px");
html.setStyleAttribute("border", "1px solid red");
html.setStyleAttribute("cursor", "default");
html.setStyleName("text");
container.add(html, new FlowData(3));

DragSource source = new DragSource(html) {
@Override
protected void onDragStart(DNDEvent event) {
// by default drag is allowed
event.setData(html);
event.getStatus().update(El.fly(html.getElement()).cloneNode(true));

}
};
// group is optional
source.setGroup("test");
}
}

[sven]

Have you actually debugged your code? There is a classcastexception. Moving this to the help forum.

[sven]

I added a couple of checks to GXT so that this kind of classcastexception is not occuring anymore. Change is in the next release. However the issue is in your code.

[the_matrix22c]

Hi,

my debugger doesn't prompt exception out. can you tell me what's wrong in my code?

I have changed onDragDrop of target2 to the code below
DropTarget target2 = new DropTarget(container3) {
@Override
protected void onDragDrop(DNDEvent event) {
super.onDragDrop(event);
Html html = (Html) event.getData();
container3.add(html, new RowData(1, 0, new Margins(0, 0, 0, 0)));
}
};
then it works in hosted mode but not firefox. Is it really a bug?
do you test work in firefox?

Thank you.

[sven]

When you insert your html widget the first time you give it a FlowData.

Than you add it to the RowLayout where it would need no layoutdata or a RowData. Here you get a classcastexception. I changed the code so that this wont occur in any further release.

[the_matrix22c]

Hi,

Does it means every time when I add some widget in the container, I should use suitable layout data in the onDragDrop method? just like the sample code below:
DropTarget target2 = new DropTarget(container3) {
@Override
protected void onDragDrop(DNDEvent event) {
super.onDragDrop(event);
Html html = (Html) event.getData();
container3.add(html, new RowData(1, 0, new Margins(0, 0, 0, 0)));
}
};

And there is another problem, my sample code work on IE6.0 and hosted mode but not firefox, does DragSource and DropTarget work in Firefox?

Thank you very much for your help.

[sven]

container3.add(html, new RowData(1, -1, new Margins(0, 0, 0, 0)));

The code (when corrected) works fine in all browsers.

[the_matrix22c]

Hi,

The code doesn't work in my firefox, I just don't know when, when I drag the drag source from container3 to container, the dragsource simply drop back into container3, ondrapdrop code of container doesn't be called.(screen shot is captured and mentioned at the end of this post)

And I found another issue,
I change the layout of container3 to new RowLayout(Style.Orientation.HORIZONTAL)
and add with layoutdata everytime, sample code listed below:

public class BasicDNDExample extends LayoutContainer {
private LayoutContainer master = new LayoutContainer();
private LayoutContainer container3 = new LayoutContainer();
private HorizontalPanel hp = new HorizontalPanel();
private LayoutContainer container = new LayoutContainer();

public BasicDNDExample() {
master.setLayoutOnChange(true);
master.setBorders(true);
master.setSize(200, 500);
master.setLayout(new FlowLayout());

hp.setLayout(new FlowLayout());
hp.setSpacing(10);
hp.setId("helloHP");
hp.setLayoutOnChange(true);

container.setLayoutOnChange(true);
container.setBorders(true);
container.setSize(200, 200);
container.setLayout(new FlowLayout());

container3.setLayoutOnChange(true);
container3.setBorders(true);
container3.setSize(200, 200);
container3.setLayout(new RowLayout(Style.Orientation.HORIZONTAL));


DropTarget target = new DropTarget(container) {
@Override
protected void onDragDrop(DNDEvent event) {
super.onDragDrop(event);
Html html = event.getData();
container.add(html, new FlowData(3));
}
};
target.setGroup("test");
target.setOverStyle("drag-ok");

DropTarget target2 = new DropTarget(container3) {
@Override
protected void onDragDrop(DNDEvent event) {
super.onDragDrop(event);
Html html = event.getData();
container3.add(html, new RowData(0.3, 1, new Margins(0, 0, 0, 0)));
}
};
target2.setGroup("test");
target2.setOverStyle("drag-ok");


final LayoutContainer sourceContainer = new LayoutContainer();
sourceContainer.setLayoutOnChange(true);
sourceContainer.setWidth(100);

addSources(sourceContainer);



this.setLayout(new FitLayout());
hp.add(master);
hp.add(sourceContainer);
master.add(container);
master.add(container3);

add(hp);
}

private void addSources(LayoutContainer container) {
for (int i = 0; i < 5; i++) {
final Html html = new Html("Drag Me " + i);
html.setStyleAttribute("padding", "5px");
html.setStyleAttribute("border", "1px solid red");
html.setStyleAttribute("cursor", "default");
html.setStyleName("text");
container.add(html, new FlowData(3));

DragSource source = new DragSource(html) {
@Override
protected void onDragStart(DNDEvent event) {
// by default drag is allowed
event.setData(html);
event.getStatus().update(El.fly(html.getElement()).cloneNode(true));
}
};
// group is optional
source.setGroup("test");
}


}

}

1/ I drag three dragsource into container3
http://farm3.static.flickr.com/2491/3821887489_e8a52c4c52_o.jpg

2/then drag "Drage Me 2" to container
http://farm4.static.flickr.com/3462/3821887505_d57b87e5e7_o.jpg

it seems still using the layoutdata before, do I need to clear the layoutdata?


For the firefox issue, let me show you by screen shot below:
1/ I drag three dragsource into container3, then drag "Drag Me 4" to container
http://farm4.static.flickr.com/3559/3822708072_d178ed010d.jpg
2/ "Drag Me 4" just add back into container3, appended after "Drag Me 3"
http://farm3.static.flickr.com/2444/3822708092_b2c9c7aee0.jpg

The behavior of the dragsource and droptarget is different from hosted mode
For IE, and chrome, the behavior is as same as the hosted mode.

Thank you for your help.

[the_matrix22c]

Hi,

Do you meet the same problem in firefox?

Thanks.