jQuery UI Draggable Position not refreshing?

Question

I am using jQuery UI Draggable and Droppable. When the draggable is over the droppable, the droppable will slide down, which will push the draggable down and away from my mouse.

Please see the example here http://jsfiddle.net/shane716/tB4L3/2/

I tried to add the refreshPositions:true to the draggable, but it does not solve the issue.

HTML Code

<table>
<tr class="droppable"><td>Drop to here</td></tr>
<tr id="slidedown" style="display:none">
    <td>
        <div>
        A<br />
        A<br />
        A<br />
        A<br />
        A<br />
        </div>
    </td>
</tr>
<tr><td class="draggable">Drag Me</td></tr>

jQuery Code

$(".draggable").draggable({
    revert: "invalid", 
    cursor: "move",
    opacity: 0.7,
    refreshPositions: true,
});

$(".droppable").droppable({
    greedy: true,
    accept: ".draggable",
    activeClass:"droppable-active",
    tolerance: "pointer",
    over: function(event, ui) {
    $("#slidedown").slideDown({duration:2000});
}

});

Event with an 'helper', the 'helper' does not revert to the draggable's position. http://jsfiddle.net/shane716/tB4L3/3/

My question is how to keep the draggable's position the same as my mouse's

Answer 1

You could use an helper : http://jsfiddle.net/tB4L3/4/

$(".draggable").draggable({
    revert: "invalid",
    cursor: "move",
    opacity: 0.7,
    helper: function () {
        return $(this).clone().appendTo('body');
    },
    start: function () {
        $(this).hide();
    },
    stop: function () {
        $(this).show();
    }
});