jQuery拖拽通过八个点改变div大小
jQuery拖拽通过八个点改变div大小，供大家参考，具体内容如下
js:
(function($){
/**
*默认参数
*/
vardefaultOpts={
stage:document,//舞台
item:'resize-item',//可缩放的类名
};
/**
*定义类
*/
varZResize=function(options){
this.options=$.extend({},defaultOpts,options);
this.init();
}
ZResize.prototype={
init:function(){
this.initResizeBox();
},
/**
*初始化拖拽item
*/
initResizeBox:function(){
varself=this;
$(self.options.item).each(function(){
//创建面板
varwidth=$(this).width();
varheight=$(this).height();
varresizePanel=$('<divclass"resize-panel"></div>');
resizePanel.css({
width:width,
height:height,
top:0,
left:0,
position:'absolute',
'background-color':'rgba(0,0,0,0.5)',
cursor:'move',
display:'none'
});
self.appendHandler(resizePanel,$(this));
/**
*创建控制点
*/
varn=$('<divclass="n"></div>');//北
vars=$('<divclass="s"></div>');//南
varw=$('<divclass="w"></div>');//西
vare=$('<divclass="e"></div>');//东
varne=$('<divclass="ne"></div>');//东北
varnw=$('<divclass="nw"></div>');//西北
varse=$('<divclass="se"></div>');//东南
varsw=$('<divclass="sw"></div>');//西南
//添加公共样式
self.addHandlerCss([n,s,w,e,ne,nw,se,sw]);
//添加各自样式
n.css({
'top':'-4px',
'margin-left':'-4px',
'left':'50%',
'cursor':'n-resize'
});
s.css({
'bottom':'-4px',
'margin-left':'-4px',
'left':'50%',
'cursor':'s-resize'
});
e.css({
'top':'50%',
'margin-top':'-4px',
'right':'-4px',
'cursor':'e-resize'
});
w.css({
'top':'50%',
'margin-top':'-4px',
'left':'-4px',
'cursor':'w-resize'
});
ne.css({
'top':'-4px',
'right':'-4px',
'cursor':'ne-resize'
});
nw.css({
top:'-4px',
'left':'-4px',
'cursor':'nw-resize'
});
se.css({
'bottom':'-4px',
'right':'-4px',
'cursor':'se-resize'
});
sw.css({
'bottom':'-4px',
'left':'-4px',
'cursor':'sw-resize'
});
//添加项目
self.appendHandler([n,s,w,e,ne,nw,se,sw],resizePanel);
//绑定拖拽缩放事件
self.bindResizeEvent(resizePanel,$(this));
//绑定触发事件
self.bindTrigger($(this));
});
self.bindHidePanel();
},
//控制点公共样式
addHandlerCss:function(els){
for(vari=0;i<els.length;i++){
el=els[i];
el.css({
position:'absolute',
width:'8px',
height:'8px',
background:'#ff6600',
margin:'0',
'border-radius':'2px',
border:'1pxsolid#dd5500',
});
}
},
/**
*插入容器
*/
appendHandler:function(handlers,target){
for(vari=0;i<handlers.length;i++){
el=handlers[i];
target.append(el);
}
},
/**
*显示拖拽面板
*/
triggerResize:function(el){
varself=this;
el.siblings(self.options.item).children('div').css({
display:'none'
});
el.children('div').css({
display:'block'
});
},
/**
*拖拽事件控制包含8个缩放点和一个拖拽位置
*/
bindResizeEvent:function(el){
varself=this;
varox=0;//原始事件x位置
varoy=0;//原始事件y位置
varow=0;//原始宽度
varoh=0;//原始高度
varoleft=0;//原始元素位置
varotop=0;
varorg=el.parent('div');
//东
varemove=false;
el.on('mousedown','.e',function(e){
ox=e.pageX;//原始x位置
ow=el.width();
emove=true;
});
//南
varsmove=false;
el.on('mousedown','.s',function(e){
oy=e.pageY;//原始x位置
oh=el.height();
smove=true;
});
//西
varwmove=false;
el.on('mousedown','.w',function(e){
ox=e.pageX;//原始x位置
ow=el.width();
wmove=true;
oleft=parseInt(org.css('left').replace('px',''));
});
//北
varnmove=false;
el.on('mousedown','.n',function(e){
oy=e.pageY;//原始x位置
oh=el.height();
nmove=true;
otop=parseInt(org.css('top').replace('px',''));
});
//东北
varnemove=false;
el.on('mousedown','.ne',function(e){
ox=e.pageX;//原始x位置
oy=e.pageY;
ow=el.width();
oh=el.height();
nemove=true;
otop=parseInt(org.css('top').replace('px',''));
});
//西北
varnwmove=false;
el.on('mousedown','.nw',function(e){
ox=e.pageX;//原始x位置
oy=e.pageY;
ow=el.width();
oh=el.height();
otop=parseInt(org.css('top').replace('px',''));
oleft=parseInt(org.css('left').replace('px',''));
nwmove=true;
});
//东南
varsemove=false;
el.on('mousedown','.se',function(e){
ox=e.pageX;//原始x位置
oy=e.pageY;
ow=el.width();
oh=el.height();
semove=true;
});
//西南
varswmove=false;
el.on('mousedown','.sw',function(e){
ox=e.pageX;//原始x位置
oy=e.pageY;
ow=el.width();
oh=el.height();
swmove=true;
oleft=parseInt(org.css('left').replace('px',''));
});
//拖拽
vardrag=false;
el.on('mousedown',function(e){
ox=e.pageX;//原始x位置
oy=e.pageY;
otop=parseInt(org.css('top').replace('px',''));
oleft=parseInt(org.css('left').replace('px',''));
drag=true;
});
$(self.options.stage).on('mousemove',function(e){
if(emove){
varx=(e.pageX-ox);
el.css({
width:ow+x
});
org.css({
width:ow+x
});
}elseif(smove){
vary=(e.pageY-oy);
el.css({
height:oh+y
});
org.css({
height:oh+y
});
}elseif(wmove){
varx=(e.pageX-ox);
el.css({
width:ow-x,
//left:oleft+x
});
org.css({
width:ow-x,
left:oleft+x
});
}elseif(nmove){
vary=(e.pageY-oy);
el.css({
height:oh-y,
//top:otop+y
});
org.css({
height:oh-y,
top:otop+y
});
}elseif(nemove){
varx=e.pageX-ox;
vary=e.pageY-oy;
el.css({
height:oh-y,
//top:otop+y,
width:ow+x
});
org.css({
height:oh-y,
top:otop+y,
width:ow+x
});
}elseif(nwmove){
varx=e.pageX-ox;
vary=e.pageY-oy;
el.css({
height:oh-y,
//top:otop+y,
width:ow-x,
//left:oleft+x
});
org.css({
height:oh-y,
top:otop+y,
width:ow-x,
left:oleft+x
});
}elseif(semove){
varx=e.pageX-ox;
vary=e.pageY-oy;
el.css({
width:ow+x,
height:oh+y
});
org.css({
width:ow+x,
height:oh+y
});
}elseif(swmove){
varx=e.pageX-ox;
vary=e.pageY-oy;
el.css({
width:ow-x,
//left:oleft+x,
height:oh+y
});
org.css({
width:ow-x,
left:oleft+x,
height:oh+y
});
}elseif(drag){
varx=e.pageX-ox;
vary=e.pageY-oy;
org.css({
left:oleft+x,
top:otop+y
});
}
}).on('mouseup',function(e){
emove=false;
smove=false;
wmove=false;
nmove=false;
nemove=false;
nwmove=false;
swmove=false;
semove=false;
drag=false;
});
},
/**
*点击item显示拖拽面板
*/
bindTrigger:function(el){
varself=this;
el.on('click',function(e){
e.stopPropagation();
self.triggerResize(el);
});
},
/**
*点击舞台空闲区域隐藏缩放面板
*/
bindHidePanel:function(el){
varstage=this.options.stage;
varitem=this.options.item;
$(stage).bind('click',function(){
$(item).children('div').css({
display:'none'
});
})
}
}
window.ZResize=ZResize;
})(jQuery);
html:
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>jQuery拖拽放大缩小插件idrag</title>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<styletype="text/css">
.item1{
width:405px;
height:291px;
cursor:move;
position:absolute;
top:30px;
left:30px;
background-color:#FFF;
border:1pxsolid#CCCCCC;
-webkit-box-shadow:10px10px25px#ccc;
-moz-box-shadow:10px10px25px#ccc;
box-shadow:10px10px25px#ccc;
}
.item2{
width:200px;
height:100px;
cursor:move;
position:absolute;
top:400px;
left:100px;
background-color:#FFF;
border:1pxsolid#CCCCCC;
-webkit-box-shadow:10px10px25px#ccc;
-moz-box-shadow:10px10px25px#ccc;
box-shadow:10px10px25px#ccc;
line-height:100px;
text-align:center;
}
body{
background-color:#F3F3F3;
}
</style>
</head>
<body>
<divid="mydiv"style="width:800px;height:800px;border-style:solid">
<divid="div1"class="resize-itemitem1">
<imgsrc="images/dog.png"width="100%"height="100%">
</div>
<divclass="resize-itemitem2">
你是我的小小狗
</div>
</div>
<scriptsrc="jquery.min.js"></script>
<scripttype="text/javascript"src='jquery.ZResize.js'></script>
<scripttype="text/javascript">
newZResize({
stage:"#mydiv",//舞台
item:'#div1',//可缩放的类名
});
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。