jQuery UI Draggable Position Incorrect - jquery-ui

Question

Thank you in advanced for taking the time to look at this. I am having issues when dragging a jQuery UI draggable object from my fixed sidebar to my image as shown below. The problem is two-fold:
1) Even though the z-index is set to 9999, the object is no longer visible when it is dragged out of the fixed sidebar.
2) When the draggable object is dropped, its position is shifted up and to the left about ~30 or 40px.
Issue one (1) visualized:
Issue two (2) visualized:
I have tried changing the CSS position attribute to all types (absolute, relative, static etc) in all combinations and cannot seem to get it to work as intended.
I was hoping someone might be able to point me in the right direction in regards to these two issues. If you would like to see a live example of these issues, please see this JSFiddle:
http://jsfiddle.net/m6pgfu5m/3/
Here are the most pertinitent CSS attributes:
.signatureTool {
z-index: 999999999;
}
.image {
border: 1px solid #DADADA;
position: relative;
width: 100%;
margin-bottom: 50px;
}
#wrapper {
margin-top: -17px;
padding-left: 250px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper {
z-index: 999;
position: fixed;
left: 250px;
width: 250px;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #E9E9E9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
overflow: hidden;
}
#page-content-wrapper {
width: 100%;
position: relative;
padding: 20px;
margin-right: 0;
}