how to remove overflow:hidden on specific object

Question

I am a creating a drag and drop web application that uses this link and I have many images that can drag on the stage.

Here's my layout:

+----------------------------------------------------+
|                                                    |
|                                                    |
|                                                    |
|                                                    |
|            STAGE DROP AREA                         |
|                                                    |
|                                                    |
|                                                    |
|                                                    |
+----------------------------------------------------+

+----------------------------------------------------+
|  +------+  +------+  +------+  +------+  +------+  |
|< |IMG A |  |IMG B |  |IMG C |  |IMG D |  |IMG E | >|
|  +------+  +------+  +------+  +------+  +------+  |
+----------------------------------------------------+

The code for drag and drop is working but my problem now is the image A..N is not draggable when I add jCarousel class (css). I use JCarousel to navigate images (if I have more than 5 images) left to right.

Everytime I drag the image, the image is hiding/disappear. I think the problem is overflow:hidden in the .jcarousel class.

Is it possible to disregard parent layout .jcarousel or the overflow:hidden in every images?

.aspx

<div class="jcarousel">  
        <ul>
            <li> <asp:Image ID="ImageA" runat="server" ImageUrl="~/Image/Image.png" CssClass="Drag"/></li>
            <li> <asp:Image ID="ImageB" runat="server" ImageUrl="~/Image/Image.png" CssClass="Drag"/></li>
            <li> <asp:Image ID="ImageC" runat="server" ImageUrl="~/Image/Image.png" CssClass="Drag"/></li>
        </ul>
</div>

CSS file

 .jcarousel {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}

.jcarousel ul {
width: 20000em;
position: relative;
list-style: none;
margin: 0;
padding: 0;
}

.jcarousel li {
float: left;
}

Answer 1

Once you post your .draggable code, I can post a more specific answer, but maybe this will help. Below is a sample .draggable call. Don't worry if yours doesn't look exactly just like this, the only thing you should add is the appendTo: "body" line

$(".draggable").draggable({
        revert : true,
        helper: "clone",
        opacity: 0.7, 
        zIndex: 999,
        appendTo: "body",
        drag : function() {
        }
    });

again.. only add the appendTo: "body" line to your code. This will make your draggable items be "relative" to the body, and not the carousel anymore, once they are dragged.