/**
* author levi
* url http://levi.cg.am
*/
$(function() {
$(document).mousemove(function(e) {
if(!!this.move) {
var posix = !document.move_target ? {
'x': 0,
'y': 0
} : document.move_target.posix,
callback = document.call_down || function() {
$(this.move_target).css({
'top': e.pageY - posix.y,
'left': e.pageX - posix.x
});
};
callback.call(this, e, posix);
}
}).mouseup(function(e) {
if(!!this.move) {
var callback = document.call_up || function() {};
callback.call(this, e);
$.extend(this, {
'move': false,
'move_target': null,
'call_down': false,
'call_up': false
});
}
});
var $box = $('.all').find('.box')
$box.mousedown(function(e) {
var offset = $(this).offset();
this.posix = {
'x': e.pageX - offset.left,
'y': e.pageY - offset.top
};
$.extend(document, {
'move': true,
'move_target': this
});
})
var ocoor = $('.box').find('.coor');
ocoor.mousedown(function(e) {
var posix = {
'w': $box.width(),
'h': $box.height(),
'x': e.pageX,
'y': e.pageY
};
$.extend(document, {
'move': true,
'call_down': function(e) {
$box.css({
'width': Math.max(100, e.pageX - posix.x + posix.w),
'height': Math.max(100, e.pageY - posix.y + posix.h)
});
}
});
return false;
});
});
<div class="all">
<div class="box">
<div class="coor"></div>
</div>
</div>
.box {
200px;
height: 100px;
cursor: move;
position: absolute;
top: 30px;
left: 30px;
background-color: #FFF;
border: 1px solid #CCCCCC;
}
.coor {
10px;
height: 10px;
overflow: hidden;
cursor: se-resize;
position: absolute;
right: 0;
bottom: 0;
background-color: #09C;
}
.all {
position: relative;
}