Best way to implement a Drag and Drop List in GWT

Question

I'm looking to implement a simple list with Drag n Drop to reorder the list. However, I may want to add more DnD features in my CMS in the future too.

I've come across 3 options in my searches

Drag-and-Drop Library for Google-Web-Toolkit (GWT) - http://code.google.com/p/gwt-dnd/
Repository for GwtQuery plugins - http://code.google.com/p/gwtquery-plugins/
a GWT2.4 mechanism Drag and Drop in GWT 2.4

Since GWT has evolved over the years, and I've found lots of old articles covering the topic of implementing DnD, I was wondering what the current best way is of implementing DnD in GWT (2.5)

Are you aware of [jquery UI droppable](http://jqueryui.com/droppable/)? It is easy, well documented and good. — Andreas Lyngstad, Dec 03 '12 at 10:47

score 2 · Accepted Answer · answered Dec 03 '12 at 16:01

2

If you can use the 'native' support implemented in GWT i recommend stick with this.

Advantages:

speed , no extra library requirements

Problems

somewhat limited functionality (limited by HTML5 native features)
browser support limited ( make sure you have Internet Explorer support- if you need)

I used gwt-dnd for a complex UI with lots of Floating windows/panels (similar to desktop environment). I recommend it if you are constrained by HTML5 features or browser support.

answered Dec 03 '12 at 16:01

MihaiS

191
1
5

since its an internal CMS - we can basically dictate the browser. What limitations would you be referring too? – Bruce Lowe Dec 03 '12 at 16:58
I needed to resize/reposition some DOM elements while adding/dragging new elements on the target area. This was not possible because the way HTML5 works by passing data (event.dataTransfer). The js libraries for DnD helped me because these interaction directly with the DOM nodes (actually moves the element during drag event. - witch is why this is slower than HTML5). Imagine a complex Dashboard build by nested SplitLayoutPannels that automatically computes the position of the elements based on the drag hover position.Like modern IDEs position pannels for console/search/overview ..etc – MihaiS Dec 04 '12 at 08:53

score 1 · Answer 2 · answered Dec 03 '12 at 14:25

1

You can keep it simple by sticking to GWT 2.4 feature support if it clears your checklist for now.

1) It will definitely be faster than any other third party stuff.

2) You can always easily update to latest GWT if you come across a bug rather than wait on the third party update.

3) If you really need some additonal feature then you can try out other two options. They are well maintained and have evolved along with GWT. You just need to ensure that performance profiling is done to cover your use cases.

answered Dec 03 '12 at 14:25

appbootup

9,537
3
33
65

One thing that did worry me in the JavaDocs was this :) *
* Experimental API: This API is still under development * and is subject to change. *
– Bruce Lowe Dec 03 '12 at 15:21
Agreed. Its a bit of risk. You can mitigate it by writing a thin layer of wrappers in your code to hide away which drag and drop support you are using from the rest of your code and any body else who uses your api. Closely monitor gwt contributor group discussions and gwt source code to see any progress or lack of it thereof. – appbootup Dec 03 '12 at 15:35

score 1 · Answer 3 · answered Dec 04 '12 at 07:22

I recommend the drag and drop plugin of Gwtquery. It supports many dnd feature out of the box and also support dnd with cell widgets.

Check the examples : http://gwtquery-plugins.googlecode.com/svn/branches/droppable_1_0/demo/GwtSimpleSample/GwtSimpleSample.html

Best way to implement a Drag and Drop List in GWT

3 Answers3