Using jQueryUI to build both vertical and horizontal drag and drop interface (includes almost-working jsfiddle example)

I'm trying to use jQueryUI to build a drag and drop interface that allows both horizontal and vertical drag/drop.

I create horizontal drop zones above, between and below any existing rows. I allow vertical drag and drop of elements with jQueryUI Sortable. And I can drag and drop existing elements to either a new row or to an existing row.

I set up this jsfiddle with what I have so far: http://jsfiddle.net/travisrussi/DzS8d/2/

These are the issues I have:

1. Dropping a second element on a new row in the contentPane causes the element to visually revert even though it drops success开发者_Go百科fully and the draggable object has 'revert' set to 'invalid'.

   • Replication steps (using the jsfiddle)
     • Drag Option 1 to the contentPane.
     • Drag Option 2 to the top droppable row (above where Option 1 is).
   • Expected Behavior
     • Once Option 2 has been dropped, it should not visually revert back to it's original position.

2. Dragging an existing element in the contentPane causes it to jump to the top left corner of the screen.

   • Replication Steps
     • Drag Option 1 to the contentPane.
     • Mousedown on Option 1 in the contentPane.
   • Expected Behavior
     • Mousedown on Option 1 should position the helper element relative to the mouse cursor.

I isolated this issue here: Connecting a Draggable to Sortable causes helper element to jump

3. Dropping a new element in an existing row with an existing element in the contentPane causes the new element to duplicate with one new element in the existing row and one new element in a new row above the existing row.

   • Replication Steps

     • Drag Option 1 to the contentPane.
     • Drag Option 2 to the same row as the first step.

   • Expected Behavior

     • Option 2 should be added to the existing row only.

Any ideas on any of these issues?

I basically rebuilt the interface and got it to work properly.

Here's a link to the working demo that allows both vertical and horizontal drag and drop: http://jsfiddle.net/travisrussi/EGNWU/

In this demo, I don't try to show/hide the horiztonal drop zones (they just stay visible).