Why does the last drag event have negative x and y coordinates?

Question

JSFiddle: http://jsfiddle.net/ypYTT/1/

As you can see, I have a very simple layout, with an image that (ultimately) will be dragged around changing the background position. If you drag a little, you can see the x, y coordinates of the event, as expected, but the last event that is fired always has a negative coordinate pair X, Y, which, apparently, depends on the size of the "result" jsfiddle frame.

What are these coordinates from the last event and why are they negative? They are dismissed from an event such as "drag and drop", but only as the last mouse click occurs (the mouse does not start from drag and drop, because it does not make sense).

HTML markup

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />

CSS

img {
    background: linear-gradient( to left top, blue, red);
    width:200px;
    height:200px;
    margin:20px;
}

Javascript

$('img').on('dragstart drag dragstop', function(e){
    console.log(e.originalEvent);
});

Answer 1

I found an error in your code. dragstop must be dragend.

See this script: http://jsfiddle.net/ypYTT/3/

I still see that negative values ​​are displayed, but they are not the last value received by the console, so there may be problems with the fix.

Now the code is as follows:

$('img').on('dragstart drag dragend', function(e){
console.log(e.originalEvent);
});
$('img').on('mouseup', function(e){
    e.stopPropagation();
    e.stopImmediatePropagation();
});