A problem with jQuery UI's drag-and-drop

[Joseph Scheuhammer]

At today's standup, I mentioned that Anastasia and I were investigating 
a problem with jQuery UI drag-and-drop ("jQuiDnD") with respect to 
Shaw-Han's uportal tabbed-navigation mockup.

The mockup is located here:
https://source.fluidproject.org/svn/fluid/components/trunk/src/webapp/component-templates/test/markupExamples/reorderer/concrete/uportal-unordered-list-tabs/

As it stands, we have not committed the changes needed to run the 
Reorderer using jQuiDnD with this mockup.  I'll try to describe the 
issue, below.

The Reorderer's keyboard drag-and-drop works as expected (of course it 
does... :-)).  Dragging and dropping a tab with the mouse does not.  The 
item dragged correctly disappears from its original location among the 
tabs, and its avatar moves around as the mouse moves, but:
- no spot "opens up" to indicate a drop region, and  ...
- the tab returns to its original location when the mouse button is 
released.

I've traced the problem to a style in "spring_standard.css":
https://source.fluidproject.org/svn/fluid/components/trunk/src/webapp/component-templates/test/markupExamples/reorderer/concrete/uportal-unordered-list-tabs/render.userLayoutRootNode.uP_files/spring_standard.css

There are three relevant identifiers that define a "float: left;" style 
rule, namely:
#tabs
#tabs a
#tab a span

If I remove the "float: left;" from the "#tabs a"' selector, jQuiDnD 
works (however, the display of the tabs is dreadful).

Anastasia found some documentation (I don't have the url) that noted 
that jQuiDnD has some problems with floating elements.  The suggestion 
is to:
1. define a css class that has the same float rule.
2. add that class to the html class attribute of the objects to be dragged,
3. add the name of the class as the value of the 'helperclass' option in 
the JavaScript invocation of jQuiDnD.

That last point needs some unpacking.  The Reorderer enables dnd via:
jQuery (containerElement).sortable (items, {options});

where {options} is a set of name/value pairs.  One of the options is 
'helperclass', where one can pass in the name of a css class, for example:
...
helperclass: 'extrafloatclass',
...

We've tried this and it works.  The problem is that it requires clients 
to create this extra css class, and place it in their markup; and only 
if they are using a float rule.  But, the idea is that clients can give 
the Reorderer arbitrary html/css, and it will reorder elements 
appropriately.

Anastasia and I started to work on a way that would automatically do 
steps 1-3 in the Reorderer's dnd enabling code.  The idea is to examine 
the styles of the reorderable items, looking for any "float" rules.  If 
there are any, create the requisite css helper class on-the-fly, add it 
to the elements' class attribute, and pass it as the 'helperclass' 
optional parameter to jQuery.sortable().

I'm not thrilled with this solution, but I'm going to give it a try just 
to see if it can be done.  Maybe it's okay for a 0.1 release, but I'm 
not certain of that.  If anyone knows of a better approach, I'm all ears.

-- 
;;;;joseph

'Oozy rat in a sanitary zoo'
 - "Bob", W. A. Yankovic -