I'm working on my first JQuery project, and i've hit a bit of a roadblock. I'm trying to allow drag & drop reordering of a set of nested lists (ul). Everything is working with the exception of the positioning. The goal is to vertically center the draggable relative to the cursor (horizontal movement is restricted), so that an li with elements nested inside it can be easily dropped. Here's the relevant JS:

$(function() {

$( .organizerlink ).draggable({ axis: y,

    containment:#organizer,

    scroll: false ,

    helper: original,

    revert: invalid,

    cursorAt: { top: Math.round($(this).outerHeight() / 2)}

});

and HTML:

<ul id=organizer>

<li class=organizerTarget>&nbsp</li>

<li class=organizerlink id=dbid-1>Page

    <ul><li class=organizerTarget organizerNewParent>&nbsp;</li></ul>

</li>

<li class=organizerTarget>&nbsp</li>

<li class=organizerlink id=dbid-2>About

    <ul>

        <li class='organizerTarget'>&nbsp;</li>

        <li class='organizerlink' id=dbid-3>Another Page<ul><li class=organizerTarget organizerNewParent>&nbsp;</li></ul></li>

        <li class='organizerTarget'>&nbsp;</li>

        <li class='organizerlink' id=dbid-4>Example<ul><li class=organizerTarget organizerNewParent>&nbsp;</li></ul></li>

    </ul>

</li>

<li class=organizerTarget>&nbsp</li>

<li class=organizerlink id=dbid-27>Stuff

    <ul><li class=organizerTarget organizerNewParent>&nbsp;</li></ul>

</li>

Some stuff I've already tried:

• setting cursorAt to $(this).height() - didn't work, i'm guessing height() pulls the css heights in, but they aren't defined explicitly so it jumps to 0


• setting it to outerHeight() gives me an error elem.style is undefined in firebug

I know the outerHeight element exists in jquery, and based on the API doc it would appear that it can be calculated automatically, even if the CSS is undefined, so I'm thinking that is the right way to be going, and perhaps $(this) is just the wrong spot to be looking for it.