Changing the dragged object when starting to drag

[Filiberto Silvestri]

Hi,

I need to implement some sort of "toolbar", where the available widgets can be dragged to the "working area".

The point is that I would like to have the toolbar widget being replaced by its real widget when starting to drag. Can anyone give me some clue on this? Thanks.

[Ricu Bachmä]

Hi

I try to complete something similar.

In my project i use dnd-gwt for a toolbar, then I try to change the widget on Drop.

I realize that with a custom DragHandler.

In the onPreviewDragEnd() function of the DragHandler I change the selectedWidgets object in the dnd-content.

Sadly this works just partwise.

The widget which is added to my drop panel is the changed widget, thats fine.

Then the code throws an exception (I think because it did not know the "moving" widget anymore).

The "moving" widget, will not be removed from the DOM, it "hangs" at the place where I droped it, and is still dragable with the "move" designe.

Here some of my code (maybe it will help you):

dragController.addDragHandler(new DragHandler(){

public void onDragEnd(DragEndEvent event) {

...

}

public void onDragStart(DragStartEvent event) {

...

}

public void onPreviewDragEnd(DragEndEvent event)

throws VetoDragException {

console_log("drag prev end");

final DragContext mycontent = event.getContext();

List<Widget> mywl = mycontent.selectedWidgets;

for(int i = 0; i < mywl.size(); i++)

{

String stemp = ((HTML)mywl.get(i)).getText();

if(stemp.contains("Container")&&!stemp.contains("SubContainer"))

{

FlowPanel mypanel = new FlowPanel();

HTML htmltemp = new HTML("Label");

htmltemp.setStyleName("edit-dndcontainer");

mypanel.add(htmltemp);

mypanel.setStyleName("edit-dndcontainer");

mywl.add(i, mypanel);

dragController.makeDraggable(mypanel);

mywl.get(i).removeFromParent();

mywl.remove(i+1);

mycontent.selectedWidgets = mywl;

}

else if(stemp.contains("Label"))

{

                                ...

}

else

{

console_log("no Container, dnd cancled");

throw new VetoDragException();

}

}

}

public void onPreviewDragStart(DragStartEvent event)

throws VetoDragException {

...

}

});

If you found a way to do it, I would be interested in your solution.

I will post you an update from my progress, if I achieve something new that works.

Or if someone knows the correct way to change a widget on drag or drop, I'll be open for every input.

[Ricu Bachmä]

I think I have a solution.

For my problem, to change on Drop, I have to tweak the widget in the onPreviewDragEnd().

But I should not work with the context, as I did.

Instead I have to work with the getSelectedWidgets() from the DragController.

I think to change the widget on Drag you have to do the same as I, but in the onPreviewDragStart().

My (for me) working solution:

dragController.addDragHandler(new DragHandler(){

public void onDragEnd(DragEndEvent event) {

}

public void onDragStart(DragStartEvent event) {

}

public void onPreviewDragEnd(DragEndEvent event)

throws VetoDragException {

Iterable<Widget> myiterable = dragController.getSelectedWidgets();

Widget mywidget = myiterable.iterator().next();

dragController.makeNotDraggable(mywidget);

FlowPanel mypanel = new FlowPanel();

                HTML htmltemp = new HTML("Label");

                htmltemp.setStyleName("edit-dndcontainer");

                mypanel.add(htmltemp);

                mypanel.setStyleName("edit-dndcontainer");

                

                ((HTML)mywidget).setHTML(mypanel.toString());

}

public void onPreviewDragStart(DragStartEvent event)

throws VetoDragException {

}

});