jquery draggable

I'm using jquery to drag some divs around, and at the end when i release the div i set it to position fixed and i give it the coordonates event.screenX and event.screenY but this method isn't working as good as i want, the coordonates seem to have some sort of offset and i can't figure out how to get pass this.Could anyone suggest a better solution or a fix? Thanks!

heres a demo http://jsfiddle.net/xtGSL/7/ you can see that if moved the box simply jumps out of sight, on开发者_开发百科 a larger page you are still able too see it the offset is around 40px

Try capturing the difference between the element's top left coordinate and the mouse pointer at the start of the dragging operation. At the end, add this difference to the mouse pointer location when setting the position of the element.

You can capture the mouse position like so:

$( ".selector" ).draggable({
   start: function(event, ui) {
     // here, event.pageX and event.pageY contain the mouse pointer location
   }
});