Fine-tuning Drag and Drop

Hi

I’m trying to implement a panel, in which users can drag and drop components to establish an order (I’m using a 1-column grid, for now).
I took the example code from https://demo.vaadin.com/sampler/#ui/drag-drop/drag-components-html5

However, there are a couple of points, which are giving me problems:

  • The components to be moved contains other components. In particular, they contain one text field. I have the problem that, if the user presses the mouse button on the text box and moves the mouse to select some text, the DnD behavior is actually triggered, instead of the selection. How can I prevent this?
  • The example actually shows how to swap two components in a container. What I needed was actually to simply insert a component in another place, keeping the order of the others. In other words, if I move a certain component to a different position, the others are simply shifted down. I haven’t found examples that show this. Is it possible? How can I do it?

Thanks