<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery拖拽放大缩小插件idrag</title>
<style type="text/css">
#box {
width: 200px;
height: 100px;
cursor: move;
position: absolute;
top: 30px;
left: 30px;
background-color: #FFF;
border: 1px solid #CCCCCC;
-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544168858724&di=d4a1a7286e6ab6d7f6a5f3c07f4e9c55&imgtype=0&src=http%3A%2F%2Fpic19.nipic.com%2F20120210%2F7827303_221233267358_2.jpg');
background-size: 100% 100%;
}
#coor {
width: 8px;
height: 8px;
overflow: hidden;
cursor: se-resize;
position: absolute;
right: -3px;
bottom: -3px;
opacity: 0.8;
background-color: #09C;
border: 1px dashed #fff ;
}
body {
background-color: #eee;
}
</style>
</head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<body style="">
<div id="box" style="width: 225.021px; height: 112.021px; top: 131.972px; left: 143.958px;">
<div id="coor"></div>
</div>
</body>
</html>
<script>
$(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 = $('#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});
}).on('mousedown', '#coor', 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(30, e.pageX - posix.x + posix.w),
'height': Math.max(30, e.pageY - posix.y + posix.h)
});
}
});
return false;
});
});
</script>