<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div style="width:503px;height:285px;background-color:grey;position:relative" id="skin">
<img style="width:500px;height:282px;position:absolute" id="heroes" src="http://javascript.ru/forum/attachments/jquery/2136d1394200133t-problema-s-zakhvatom-myshyu-heroes-jpg">
<img style="position:absolute;right:0;bottom:0" id="corner" src="http://javascript.ru/forum/attachments/jquery/2137d1394200133-problema-s-zakhvatom-myshyu-handle-se-png">
</div>
<div id="info"></div>
<script>
function Resizeable(options) {
var elem = options.elem;
elem.move=false;
elem.on('mousedown', capture);
*!*
//mousemove и mouseup нужно отслеживать на документе а не конкретно на этом элементе.
$(document).on('mousemove', cursorMove);
$(document).on('mouseup', release);
*/!*
function capture(e){
if($(e.target).attr('id')=='corner' && elem.move==false){
elem.move=true;
getCoords(e);
console.log(elem.x+' '+elem.y);
return false;
}
}
function cursorMove(e){
if(elem.move==true){
size($('#skin'), e);
size($('#heroes'), e);
}
getCoords(e);
}
function release(e){
elem.move=false;
}
function size(rect, e){
rect.css('height',rect.height()-(elem.y-e.pageY))
.css('width',rect.width()-(elem.x-e.pageX));
}
function getCoords(e){
elem.x=e.pageX;
elem.y=e.pageY;
}
}
*!*
//тут строчку нужно было дописать
*/!*
Resizeable({'elem': $('#corner')});
</script>
</body>
</html>