Draggble object hides outside content when wrapt in span

Question

I have a simple CSS problem

In this site http://web.cinaird.se/pdf/test.htm (<--removed) I have a draggable images in the top content, I want a span that float on top of the image and for this I need a span containing the image and a span floating on top. So long no problem but now when i drag the image it hides outside the top content.

so my question is as follows, how can I wrap a image and a floating span above and still be able to drag it outside the container.

I hop I don't have missed something obvious and you have a quick solution, Thanks for your time.

Answer 1

you need to change

function setDraggable(){
    $("#topContent img").draggable({
        opacity: 0.7,

        revert: 'invalid',
        helper: 'clone',
    });
}

to

function setDraggable(){
    $("#topContent img").draggable({
        opacity: 0.7,
        appendTo: 'body',
        revert: 'invalid',
        helper: 'clone',
    });
}

so the element's parent container will be the body