Drag and Drop Wrapper TextField can't be focused in ALL circumstances


I’m having some issues with drag and drop of a CustomComponent when it contains a text field. The issue is that the text fields inside a DragAndDropWrapper are not selectable.

The documentation says that HTML5 drag mode for IE6-8 this is as issue. But my findings are:

HTML5 Drag and Drop - Doesn’t work at all in IE9 or FF, Only Chrome
Wrapper Drag and Drop - In all browsers text fields are not selectable
Component Drag and Drop - In all browsers text fields are not selectable

I haven’t found this limitation documented anywhere, so is there something strange with my application? or does it just not work?

Using VAADIN 6.8.5

Currently the workaround is to have a component within the layout as a drag handle and put a DragAndDropWrapper around that only. But then it only shows that component when dragging and I would like it to show the entire CustomComponent.

So I guess as an alternative to getting the text fields working, is there any way to set a drag handle for a component? Even using some CSS trickery or something? So then I can still make the entire CustomComponent draggable, but it has a handle to start the drag so the text fields are not affected.

Thanks, Ryan

This is the third post I found in regards to this and no answer. I am stuck with this too. There are two other similar questions posted:



I ended up using the drag and drop layouts addon. It has a draggable panel demo where it uses the caption as a drag handle. I then used CSS to position and style the drag handle where I wanted it. It used to have a glitch that you couldn’t change the class name of the caption, but I think that has been fixed now. It’s a bit of fiddling, but it works.

Thank you Ryan. I’ll look into the add-on … Maybe that is the only solution for now(?). Given the high probability of using Drag & Drop layouts with other UI elements, I think this should be addressed in Vaadin core. Maybe we should submit a bug ticket? Or a feature request?

Go for it. You might get better support if you have a pro account? I haven’t tried if vaadin 7 is any better either.

I tried this code NativeSelect select = new NativeSelect("nativeselect"); TextField txt = new TextField("textfield"); VerticalLayout vl = new VerticalLayout(); vl.addComponent(select); vl.addComponent(txt); DragAndDropWrapper wrapper = new DragAndDropWrapper(vl); layout.addComponent(wrapper); in Vaadin 7.1.2 and it seems to work totally fine. I also tried directly embedding the select in the wrapper and i was also still able to use the select.

Sorry to dig out an old post, but I have the same problem. I’m using Vaadin 7.1.8.

My custom component that is wrapped in DragAndDropWrapper consists of an icon, 2 text fields and a few buttons. What I would like to have is the whole component draggable, but text areas still behave in a native way.

Would it be possible to put the text fields “above” the wrapper, so they catch the mouse events instead of wrapper, allowing component to be dragged as long as user starts drag outside of text fields?

Without customizations on the client side, AbsoluteLayout does allow manually setting the z-index of components in it, which MIGHT enable doing this. I suspect that wouldn’t be enough, though.