jQuery拖拽放大缩小插件idrag js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery拖拽放大缩小插件idrag js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery拖拽放大缩小插件idrag</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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;}
#coor { width: 10px; height: 10px; overflow: hidden; cursor: se-resize; position: absolute; right: 0; bottom: 0; background-color: #09C; }
body { background-color: #F3F3F3; }
</style>
</head>
<body>
<div id="box">
    <div id="coor"></div>
</div>
</body>
</html>

JS代码(drag.js):

/** * 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 = $('#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;
}
);
}
);

附件:下载该文件资源,减少时间成本(增值服务)