您的位置：首页 > 其它

鼠标拖拽改变div的大小

2012-11-25 19:24 477 查看 
一：
UI/API/1.8/Resizable
FromjQueryWiki
<UI‎|API
(RedirectedfromUI/Resizables/resizable)
Jumpto:navigation,search
Overview
Options
Events
Methods
Theming
jQueryUIResizable
Overview
ThejQueryUIResizablepluginmakesselectedelementsresizable(meaningtheyhavedraggableresizehandles).Youcanspecifyoneormorehandlesaswellasminandmaxwidthandheight.

Allcallbacks(start,stop,resize)receivetwoarguments:Theoriginalbrowsereventandaprepareduiobject.Theuiobjecthasthefollowingfields:

ui.helper-ajQueryobjectcontainingthehelperelement
ui.originalPosition-{top,left}beforeresizingstarted
ui.originalSize-{width,height}beforeresizingstarted
ui.position-{top,left}currentposition
ui.size-{width,height}currentsize
Dependencies
UICore
UIWidget
UIMouse
Example
DemoViewSourceAsimplejQueryUIResizable.

$("#resizable").resizable();

<!DOCTYPEhtml>
<html>
<head>
<linkhref="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"rel="stylesheet"type="text/css"/>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<styletype="text/css">
#resizable{width:100px;height:100px;background:silver;}
</style>
<script>
$(document).ready(function(){
$("#resizable").resizable();
});
</script>
</head>
<bodystyle="font-size:62.5%;">

<divid="resizable"></div>

</body>
</html>



jquery有很多插件可以轻松实现漂亮的前端效果，要好好学习。

二：（我用的是这一段）

<html>

<head>
<title></title>
<metacontent="text/html;charset=gb2312"http-equiv="Content-Type">
<style>
#testDiv{
position:absolute;
width:100%;
height:200;
overflow:hidden;
z-index:2;
border:1pxoutset;
}

#innerNice{
height:200;
overflow:auto;
width:100%;
border:1pxinset;
}

</style>

<SCRIPTlanguage=javascript>
/////////////////////////////////////////////////////////////////////////
//GenericResize//
////
//Youmayusethisscriptaslongasthisdisclaimerisremained.//
//
////
//Howtousethisscript!//
//LinkthescriptintheHEADandcreateacontainer(DIV,preferable//
//absolutepositioned)andaddtheclass="resizeMe"toit.//
/////////////////////////////////////////////////////////////////////////

varleftObject=null;//Thisgetsavalueassoonasaresizestart

functionresizeObject(){
this.el=null;//pointertotheobject
this.dir="";//typeofcurrentresize(n,s,e,w,ne,nw,se,sw)
this.grabx=null;//Someusefulvalues
this.graby=null;
this.width=null;
this.height=null;
this.left=null;
this.top=null;
}

//Findoutwhatkindofresize!Returnastringinlcludingthedirections
functiongetDirection(el){
varxPos,yPos,offset,dir;
dir="";

xPos=window.event.offsetX;
yPos=window.event.offsetY;

offset=8;//Thedistancefromtheedgeinpixels

if(yPos<offset)dir+="n";
elseif(yPos>el.offsetHeight-offset)dir+="s";
if(xPos<offset)dir+="w";
elseif(xPos>el.offsetWidth-offset)dir+="e";

returndir;
}

functiondoDown(){
varel=getReal(event.srcElement,"className","resizeMe");
varer=getReal(event.srcElement,"className","resizeRight");

if(el==null){
theobject=null;
return;
}

dir=getDirection(el);
if(dir=="")return;

leftObject=newresizeObject();

leftObject.el=el;
leftObject.dir=dir;

leftObject.grabx=window.event.clientX;
leftObject.graby=window.event.clientY;
leftObject.width=el.offsetWidth;
leftObject.height=el.offsetHeight;
leftObject.left=el.offsetLeft;
leftObject.top=el.offsetTop;

window.event.returnValue=false;
window.event.cancelBubble=true;
}

functiondoUp(){
if(leftObject!=null){
leftObject=null;
}
}

functiondoMove(){
varel,er,xPos,yPos,str,xMin,yMin;
xMin=200;//Thesmallestwidthpossible
yMin=200;//height

el=getReal(event.srcElement,"className","resizeMe");
er=getReal(event.srcElement,"className","resizeRight");

if(el.className=="resizeMe"){
str=getDirection(el);
//Fixthecursor
if(str=="")str="default";
elsestr+="-resize";
el.style.cursor=str;
}

//Draggingstartshere
if(leftObject!=null){
if(dir.indexOf("e")!=-1)
leftObject.el.style.width=Math.max(xMin,leftObject.width+window.event.clientX-leftObject.grabx)+"px";

if(dir.indexOf("s")!=-1)
leftObject.el.style.height=Math.max(yMin,leftObject.height+window.event.clientY-leftObject.graby)+"px";

if(dir.indexOf("w")!=-1){
leftObject.el.style.left=Math.min(leftObject.left+window.event.clientX-leftObject.grabx,leftObject.left+leftObject.width-xMin)+"px";
leftObject.el.style.width=Math.max(xMin,leftObject.width-window.event.clientX+leftObject.grabx)+"px";
}
if(dir.indexOf("n")!=-1){
leftObject.el.style.top=Math.min(leftObject.top+window.event.clientY-leftObject.graby,leftObject.top+leftObject.height-yMin)+"px";
leftObject.el.style.height=Math.max(yMin,leftObject.height-window.event.clientY+leftObject.graby)+"px";
}

window.event.returnValue=false;
window.event.cancelBubble=true;
}
}

functiongetReal(el,type,value){
temp=el;
while((temp!=null)&&(temp.tagName!="BODY")){
if(eval("temp."+type)==value){
el=temp;
returnel;
}
temp=temp.parentElement;
}
returnel;
}

document.onmousedown=doDown;
document.onmouseup=doUp;
document.onmousemove=doMove;
</SCRIPT>

<metacontent="MicrosoftFrontPage4.0"name="GENERATOR">
<metaname="ProgId"content="FrontPage.Editor.Document">
</head>

<body>

<divclass="resizeMe"id="testDiv">
<divid="innerNice"style="background-color:gray">
border
</div>
</div>

</body>
</html>


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航