I am using a drag and dropable grid (GridDragSource and GridDropTarget) together with another drag and dropable UI component and it works quite fine. Now I want to customize it. If I drag something from the grid, I do not want see the dragged row instead of there should be just a simple rectangle with a specific size for example. And I also want to manipulate the y coordinate of the visualisation of the dragged item. I want to set it and if the mouse moves somewhere, only the y coordinate should change and x is fixed.
Is it possible? What would be the best way to implement it? Where is the code how the grid does it’s drag visualisation? Till now I was not able to find it.
If this is done I need the same for my other Component (it is a Canvas which “uses” DragSourceExtension and DropTargetExtension). But I think it should be the same for the canvas, or not?
Thanks a lot, Philipp
Edit:
Now I know a little bit more. It is possible to set an image on the
DragSourceExtension , but that is not suitable for me, because my “image” depends on the dragged data. And there is no possibility to change the image while dragging (to chnage the image via a
DragStartListener also does not work).
So I tried to create my image on the client side, as the
GirdSourceClientManager does it in the method
setDragImage() with the badge if you have selected more than one row.But till now I had no success. I tried it with code that nearly looks like the original implementation, I tried it with an simple DIV which I added to the dragged element. I also tried to add an element as an image via
DataTranfser.setDragImage() (is only image element possible? Because the signature allows any element? How to create an image during runtime?).
But the result was always the same. I saw only the original drag image or there was no drag image at all. Do I have to do more than overriding
setDragImage() in the
Connector ? Could someone post a code snippet of a small example which uses a dynamic drag image (a “real” image, that is created during runtime, a canvas object, or a DIV, something like that)?
for my first problem I found a way that works for me, except IE. I extended
DragSourceExtensionConnector and overrided the method
setDragImage() and
onDragEnd() :
final com.google.gwt.dom.client.Element element = Document.get().getElementById( "MyDraggedCanvas" );
if ( element != null ) {
element.removeFromParent();
}
}
[/code]Why it is not working in IE? In
GridDragSourceConnector.setDragImage() you can find the following comment and code at the end of the method:
// The following hack is used since IE11 doesn't support custom drag
// image.
// 1. Remove multiple rows drag badge, if used
// 2. add selection column cell back, if was removed
// 3. reset frozen column transitions, if were cleared
AnimationScheduler.get().requestAnimationFrame(timestamp -> {
if (badge != null) {
badge.removeFromParent();
}
for (int i = 0; i < frozenCellsTransforms.size(); i++) {
String transform = frozenCellsTransforms.get(i);
if (transform != null) {
((Element) draggedRowElement.getChild(i).cast())
.getStyle().setProperty("transform", transform);
}
}
if (selectionColumnCell != null) {
draggedRowElement.insertFirst(selectionColumnCell);
}
}, (Element) dragStartEvent.getEventTarget().cast());
But I do not understand what is done there. First I wonder why there is no: “if ( Browser == IE ) …”. Second, the badge, that was added before is removed again and afterwards the badge is not mentioned anymore. But it works ?!? Next thing is, in my solution I set the drag image, the badge is not set as a drag image. However do I have the same problem or is it another one?
It would be great, if someone could help me, thanks, Philipp
now I try to solve my second problem: the drag image shell only move on the y axis, x axis shell be fixed. I found a possibility to add a
DragHandler , which is called every time a dragged item is moving or just still the dragging is not stopped (some code from my extended
DragSourceExtensionConnector ):
protected void setDragImage(
final NativeEvent pDragStartEvent )
{
…
if ( vTarget != null )
{
((AbstractComponentConnector)vTarget).getWidget().addHandler( new DragHandler()
{ @Override
public void onDrag(
final DragEvent pEvent )
{
// What is to do here?
// How can I manipulate the coordinates of the drag image?
}
}, DragEvent.getType() );
}
}
[/code]What shell I do in the DragHandler? I tried to re-set the drag image in the
DataTransfer , but that had no effect. What else can I do? Or is it just impossible with the HTML5 Drag’n’Drop what I want to do?
Unfortunately I don’t think that what you would like to do is possible. The drag and drop feature in 8 uses HTML5 functionality and that does not support such customisations.
As you can see, the drag image is set by
DataTransfer.setDragImage() which accepts offset coordinates to change the image position relative to the mouse pointer. Once the position is set, it cannot be changed, the browser (and OS) takes care of displaying the image at the right position.
What you could perhaps do is a completely custom drag image implementation that displays the image as element at an absolute position and then tracks the mouse pointer as you need. The old version of Drag and Drop did it similarly, I believe.
I solved it in another way. I used the framework
GWT DND on client side without Vaadin 8 Drag’n’Drop features. This framework is based on mouse events and does not use HTML5 DnD functionality. Withit you can use custom drag images that are generated during drag start and you can manipulate x and y coordinates of the drag image during dragging.
But unfortunately it does not work with the Vaadin 8.1 grid. Till now I had no time for further inverstigations. I suppose the grid consumes some mouse events so the GWT DND functionality is not triggered in the right way anymore.