jquery实现拖拽调整Div大小
今天写了一天这个jquery插件：
可以实现对div进行拖拽来调整大小的功能。
(function($){
$.fn.dragDivResize=function(){
vardeltaX,deltaY,_startX,_startY;
varresizeW,resizeH;
varsize=20;
varminSize=10;
varscroll=getScrollOffsets();
var_this=this;
for(vari=0;i<_this.length;i++){
vartarget=this[i];
$(target).on("mouseovermousemove",overHandler);
}
functionoutHandler(){
for(vari=0;i<_this.length;i++){
target.style.outline="none";
}
document.body.style.cursor="default";
}
functionoverHandler(event){
target=event.target||event.srcElement;
varstartX=event.clientX+scroll.x;
varstartY=event.clientY+scroll.y;
varw=$(target).width();
varh=$(target).height();
_startX=parseInt(startX);
_startY=parseInt(startY);
if((0<target.offsetLeft+w-_startX&&target.offsetLeft+w-_startX<size)||(0<target.offsetTop+h-_startY&&target.offsetTop+h-_startY<size)){
target.style.outline="2pxdashed#333";
if((0>target.offsetLeft+w-_startX||target.offsetLeft+w-_startX>size)&&0<target.offsetTop+h-_startY&&target.offsetTop+h-_startY<size){
resizeW=false;
resizeH=true;
document.body.style.cursor="s-resize";
}
if(0<target.offsetLeft+w-_startX&&target.offsetLeft+w-_startX<size&&(0>target.offsetTop+h-_startY||target.offsetTop+h-_startY>size)){
resizeW=true;
resizeH=false;
document.body.style.cursor="w-resize";
}
if(0<target.offsetLeft+w-_startX&&target.offsetLeft+w-_startX<size&&0<target.offsetTop+h-_startY&&target.offsetTop+h-_startY<size){
resizeW=true;
resizeH=true;
document.body.style.cursor="se-resize";
}
$(target).on('mousedown',downHandler);
}else{
resizeW=false;
resizeH=false;
$(target).off('mousedown',downHandler);
}
}
functiondownHandler(event){
target=event.target||event.srcElement;
varstartX=event.clientX+scroll.x;
varstartY=event.clientY+scroll.y;
_startX=parseInt(startX);
_startY=parseInt(startY);
if(document.addEventListener){
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
}elseif(document.attachEvent){
target.setCapture();
target.attachEvent("onlosecapeture",upHandler);
target.attachEvent("onmouseup",upHandler);
target.attachEvent("onmousemove",moveHandler);
}
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
}
functionmoveHandler(e){
if(!e)e=window.event;
varw,h;
varstartX=parseInt(e.clientX+scroll.x);
varstartY=parseInt(e.clientY+scroll.y);
target=target||e.target||e.srcElement;
if(target==document.body){
return;
}
if(resizeW){
deltaX=startX-_startX;
w=$(target).width()+deltaX<minSize?minSize:$(target).width()+deltaX;
target.style.width=w+"px";
_startX=startX;
}
if(resizeH){
deltaY=startY-_startY;
h=$(target).height()+deltaY<minSize?minSize:$(target).height()+deltaY;
target.style.height=h+"px";
_startY=startY;
}
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}
}
functionupHandler(e){
if(!e){
e=window.event;
}
resizeW=false;
resizeH=false;
target=e.target||e.srcElement;
$(target).on("mouseout",outHandler);
if(document.removeEventListener){
document.removeEventListener("mousemove",moveHandler,true);
document.removeEventListener("mouseup",upHandler,true);
}elseif(document.detachEvent){
target.detachEvent("onlosecapeture",upHandler);
target.detachEvent("onmouseup",upHandler);
target.detachEvent("onmousemove",moveHandler);
target.releaseCapture();
}
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}
}
functiongetScrollOffsets(w){
w=w||window;
if(w.pageXOffset!=null){
return{x:w.pageXOffset,y:w.pageYOffset};
}
vard=w.document;
if(document.compatMode=="CSS1Compat"){
return{x:d.documentElement.scrollLeft,y:d.documentElement.scrollTop};
}
return{x:d.body.scrollLeft,y:d.body.scrollTop};
}
}
}(jQuery));
jQuery("div").dragDivResize();
记录一下今天的劳动成果，可能会有很多不成熟的地方，欢迎大家来指正，谢谢！
以上就是本文的全部内容了，希望大家能够喜欢。
热门推荐
10 小红书平安祝福语简短
11 生日祝福语大全女孩简短
12 收生日红包祝福语 简短
13 领证幽默祝福语简短
14 法考面试祝福语简短
15 老哥出门祝福语简短语
16 送灯祝福语简短独特
17 幼儿狗年祝福语大全简短
18 好听的元旦简短祝福语