Стал решать задачу с этого сайта, где картинку нужно таскать за правый нижний угол, изменяя её размер. Для этого в углу создаётся элемент для захвата. Но при выходе за его пределы mousedown не срабатывает, а срабатывает лишь при повторном нажатии. Изучение решения на сайте не помогло, т. к. оно существенно отличается от моего. Помогите, пожалуйста. Текст ниже. Картинки присоединяю.
<!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="heroes.jpg">
<img style="position:absolute;right:0;bottom:0" id="corner" src="handle-se.png">
</div>
<div id="info"></div>
<script>
function Resizeable(options) {
var elem = options.elem;
elem.move=false;
elem.on('mousedown', capture);
elem.on('mousemove', cursorMove);
elem.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);
}
}
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;
}
}
</script>
</body>
</html>