Моя попытка:
<!DOCTYPE html>
<style>
.resizeable{
padding: 10px;
position: relative;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.resizeable .resizer{
position: absolute;
bottom: 0;
right: 0;
width: 16px;
height: 16px;
background: url(http://javascript.ru/forum/attachments/jquery/2137d1394200133-problema-s-zakhvatom-myshyu-handle-se-png);
cursor: se-resize;
}
.resizeable img{
width: 100%;
height: 100%;
}
</style>
<div class="resizeable" style="width: 750px; height: 258px">
<img src="http://upload.wikimedia.org/wikipedia/commons/a/aa/Logo_Google_2013_Official.svg" alt="" />
</div>
<script>
function Resizeable(element) {
this.element = element;
this.resizer = document.createElement('div');
this.resizer.className = 'resizer';
this.element.appendChild(this.resizer);
this.resizer.addEventListener('mousedown', this);
this.startMousePosition = null;
this.startElementDimension = null;
}
Resizeable.prototype.handleEvent = function(event) {
this['handle' + event.type.charAt(0).toUpperCase() + event.type.slice(1) + 'Event'](event);
};
Resizeable.prototype.handleMousedownEvent = function(event) {
if (this.element.setCapture)
this.element.setCapture();
window.addEventListener('mousemove', this);
window.addEventListener('mouseup', this);
this.startMousePosition = {x: event.pageX, y: event.pageY};
this.startElementDimension = {width: this.element.offsetWidth, height: this.element.offsetHeight};
event.preventDefault();
};
Resizeable.prototype.handleMousemoveEvent = function(event) {
var offset = {
x: event.pageX - this.startMousePosition.x,
y: event.pageY - this.startMousePosition.y,
};
console.log(event);
this.element.style.width = this.startElementDimension.width + offset.x + 'px';
this.element.style.height = this.startElementDimension.height + offset.y + 'px';
};
Resizeable.prototype.handleMouseupEvent = function(event) {
window.removeEventListener('mousemove', this);
window.removeEventListener('mouseup', this);
if (this.element.releaseCapture)
this.element.releaseCapture();
this.startMousePosition = null;
};
new Resizeable(document.querySelector('.resizeable'));
</script>
Для работы в IE8 нужен костыль для addEventListener