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();
记录一下今天的劳动成果,可能会有很多不成熟的地方,欢迎大家来指正,谢谢!
以上就是本文的全部内容了,希望大家能够喜欢。