fredsa / gwt-dnd

Library providing easy to use mouse or touch based drag-and-drop capabilities to GWT
42 stars 41 forks source link

New feature: Drag proxies that are a different size to the draggable object(s) #126

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago
For our application we want to have a drag proxy which is not the same size as 
the draggable objects. An example would be multi selecting 6 items from a list, 
dragging them and having the drag proxy as "6 items" rather than directly 
replicating the draggable objects. In this case the proxy should follow the 
mouse directly rather than have any relation to the draggable object since it 
does not matter where the user started the drag from.

At first this seemed easy to do - just extend PickupDragController and override 
the newDragProxy method. But the proxy will come out in the wrong position. 
Updates to the newDragProxy method to position the proxy inside a panel that 
know the size of the draggable widget would in theory work. But if you 
introduce constrainedToBoundaryPanel=true then you have yet another problem 
that the boundaries of the drag wont be right, especially if your widgets are 
quite wide.

The core issue is that PickupDragController contains some code which positions 
the proxy according to the relative position of the mouse inside the draggable 
objects at the start of the drag. Also, to override this behaviour I had to add 
classes into the com.allen_sauer.gwt.dnd.client package since I can't just 
override a few lines of PickupDragController as they both reference either 
private attributes. Going one level further to AbstractDragController doesn't 
work either as the context is protected.

To solve this I added a class to com.allen_sauer.gwt.dnd.client which is a copy 
of PickupDragController with a few changes (see attached).

Original issue reported on code.google.com by cknow...@gmail.com on 28 Sep 2010 at 5:46

Attachments:

GoogleCodeExporter commented 9 years ago
Look for "// changed here" in the attached for the code changes. I've left the 
old lines commented out below for comparison. Perhaps the option for proxies to 
follow the mouse directly could be built into the library?

Original comment by cknow...@gmail.com on 28 Sep 2010 at 5:48

GoogleCodeExporter commented 9 years ago
How about this hack?

  protected Widget newDragProxy(DragContext context) {
    AbsolutePanel container = new AbsolutePanel();
    container.getElement().getStyle().setProperty("overflow", "visible");
    container.setPixelSize(100, 100);
    Label w = new Label(context.selectedWidgets.size() + " item(s)");
    RootPanel.get().add(w, -200, -200); // add off screen to get dimensions
    int x = context.mouseX - context.draggable.getAbsoluteLeft() - w.getOffsetWidth() / 2;
    int y = context.mouseY - context.draggable.getAbsoluteTop() - w.getOffsetHeight() / 2;
    container.add(w, x, y);
    return container;
  }

Original comment by fredsa@google.com on 29 Sep 2010 at 8:46

GoogleCodeExporter commented 9 years ago
Just changed this in the code and it doesn't work. I updated the setPixelSize 
to be the size the drag proxy will be.

The draggable object is quite wide and if you start the drag in the middle of 
the object and drag the proxy over to the left or the right, the proxy stops 
before it's even close to the edge of the window showing that it's contained in 
something much larger than itself.

I'm going back to my attached code for now since it works for the situations we 
need just unfortunately a bit untidy having to put classes in the gwt-dnd 
package.

Original comment by cknow...@gmail.com on 30 Sep 2010 at 3:07

GoogleCodeExporter commented 9 years ago
Feel free to run modified version of gwt-dnd to suit your needs.

Hopefully the recent migration to a git repository will make this easier, since 
you can easily clone the responsitory and pull patches from it into your clone.

Original comment by fredsa on 31 Jan 2012 at 6:22