//HISTORY
//------------------------------------------------------------------
//Jan23,2004:Fixedproblemswhichcausedthescriptnottoworkin
//someframedsituations.Improvedbrowsersupport.
//Addedeasier"addHandle"implentation.
//May25,2003:Addedbettereventpositiondetection,addedcaching
//ofIFRAMEobjectreferencestoavoidlookups.Added
//'move'cursortohandles.
//May24,2003:UpdatedtofixbugwithNetscape7.x
//May23,2003:Created
/*
DESCRIPTION:ThepurposeofthislibraryistoallowIFRAMEobjectstobe
draggedaroundthescreeninthesamewaythatpopupwindowsordraggable
DIVtagsareoftenused.SinceIFRAMEobjectsalwayscoverformobjects,
thismakesanidealsolutionforasimulated"popupwindow"onapagewith
formobjects.
COMPATABILITY:TestedsuccessfullywithIE6.x,Netscape6.2,7.x,and
Mozilla1.3.SincethisscriptusesIFRAMEobjectsandDHTMLheavily,
cross-browsercompatabilityisagoalbuttheremaybesomequirksin
variousbrowserversions.
USAGE:
1)IncludethesourcefileinyourmaindocumentwhichcontainstheIFRAME
tags.Makesureeachiframehasaunique"ID"attribute.Forbestbrowser
compatability,alsoincludea"NAME"attributeintheIFRAMEtagthat
hasthesamevalueasthe"ID"attribute.
2)InthedocumentcontentofeachIFRAMEwhichwillbedraggable,,dotwo
things:
a)Includethedragiframe.jsfileinthesource
b)addthiscodetothe<BODY>tag:
onLoad="addHandle(document.getElementById('toolbar'),window);"
Where'toolbar'istheIDofanelementonthepagewhichshouldbethe'handle'
bywhichtheIFRAMEshouldbedragged(likeatoolbaratthetop).
IfyouwanttheIFRAMEtobedraggablebyclickinganywhereintheIFRAME
document,use:
onLoad="addHandle(document.getElementsByTagName('body').item(0),window);"
NOTE:Thecodewillautomaticallylookupthewindow.parenttreetofinda
parentdocumentwithdraggableiframesenabled.Itwillattachitselftothe
firstdocumentitfinds,allowingittoworkwithinaframedenvironment.
Inyourparentdocument(containingtheIFRAMEs),youmaysetacoupleofoptions:
//SettotruetoalwaysbringtheselectedIFRAMEtothe"top"ofthezIndex.
//Defaultstofalse
bringSelectedIframeToTop(true|false);
//SettotruetoallowIFRAMEobjectstobedraggedoffthescreen.Thismay
//makethehandlebenolongerreachablebythemouse,causingtheIFRAMEto
//bestranded.
//Defaultstofalse
allowDragOffScreen(true|false);
//YoumaymanuallysetthisvariabletodefinethehighestzIndexusedin
//yourmaindocument.ThisisusedtodeterminewhatzIndextogiveanIFRAME
//ifitisselectedand"bringSelectedIframeToTop"issettotrue.
//Defaultsto99.
DIF_highestZIndex=4;
NOTES:
1)Ifyouhavedefinedonmousedownoronmouseupeventhandlersforyour"handle"
objectintheIFRAME,theywillbeover-written.
2)Ifyouhavedefinedanonmousemovehandlerineitherthemaindocumentor
theIFRAMEdocument,theywillbeover-written.
3)All<IFRAME>objectsmusthaveanID!
*/
//iframe属性参考:http://www.phpx.com/man/dhtmlcn/objects/IFRAME.html
//http://www.mattkruse.com/javascript/dragiframe/
//Variablesusedfor"DraggableIFrame"(DIF)functions
varDIF_dragging=false;
varDIF_iframeBeingDragged="";
varDIF_iframeObjects=newObject();
varDIF_iframeWindows=newObject();
varDIF_iframeMouseDownLeft=newObject();
varDIF_iframeMouseDownTop=newObject();
varDIF_pageMouseDownLeft=newObject();
varDIF_pageMouseDownTop=newObject();
varDIF_handles=newObject();
varDIF_highestZIndex=99;
varDIF_raiseSelectedIframe=false;
varDIF_allowDragOffScreen=false;
//SettotruetoalwaysraisethedraggediframetotopzIndex
functionbringSelectedIframeToTop(val){
DIF_raiseSelectedIframe=val;
}
//Settotrytoallowiframestobedraggedoffthetop/leftofthedocument
functionallowDragOffScreen(val){
DIF_allowDragOffScreen=val;
}
//Methodtobeusedbyiframecontentdocumenttospecifywhatobjectcanbedraggableinthewindow
functionaddHandle(o,win){
if(arguments.length==2&&win==window){
//JSisincludedintheiframewhohasahandle,searchupthechaintofindaparentwindowthatthisoneisdraggedin
varp=win;
while(p=p.parent){
if(p.addHandle){p.addHandle(o,win,true);return;}
if(p==win.top){return;}//Alreadyreachedthetop,stoplooking
}
return;//Ifitreacheshere,thereisnoparentwiththeaddHandlefunctiondefined,sothisframecan'tbedragged!
}
vartopRef=win;
vartopRefStr="window";
while(topRef.parent&&topRef.parent!=window){
topRef=topRef.parent;
topRefStr=topRefStr+".parent";
}
//Addhandlerstochildwindow
if(typeof(win.DIF_mainHandlersAdded)=="undefined"||!win.DIF_mainHandlersAdded){
//ThisisdoneinafunkywaytomakeNetscapehappy
with(win){
eval("functionOnMouseDownHandler(evt){if(typeof(evt)=='undefined'){evt=event;}"+topRefStr+".parent.DIF_begindrag(evt,"+topRefStr+")}");
eval("document.onmousedown=OnMouseDownHandler;");
eval("functionOnMouseUpHandler(evt){if(typeof(evt)=='undefined'){evt=event;}"+topRefStr+".parent.DIF_enddrag(evt,"+topRefStr+")}");
eval("document.onmouseup=OnMouseUpHandler;");
eval("functionOnMouseMoveHandler(evt){if(typeof(evt)=='undefined'){evt=event;}"+topRefStr+".parent.DIF_iframemove(evt,"+topRefStr+")}");
eval("document.onmousemove=OnMouseMoveHandler;");
win.DIF_handlersAdded=true;
win.DIF_mainHandlersAdded=true;
}
}
//Addhandlertothiswindow
if(typeof(window.DIF_handlersAdded)!="undefined"||!window.DIF_handlersAdded){
eval("functionOnMouseMoveHandler(evt){if(typeof(evt)=='undefined'){evt=event;}DIF_mouseMove(evt,window)}");
eval("document.onmousemove=OnMouseMoveHandler;");
window.DIF_handlersAdded=true;
}
o.style.cursor="";
varname=DIF_getIframeId(topRef);
if(DIF_handles[name]==null){
//Initializerelativepositionsformousedownevents
DIF_handles[name]=newArray();
DIF_iframeMouseDownLeft[name]=0;
DIF_iframeMouseDownTop[name]=0;
DIF_pageMouseDownLeft[name]=0;
DIF_pageMouseDownTop[name]=0;
}
DIF_handles[name][DIF_handles[name].length]=o;
}
//Generalizedfunctiontogetpositionofanevent(likemousedown,mousemove,etc)
functionDIF_getEventPosition(evt){
varpos=newObject();
pos.x=0;
pos.y=0;
if(!evt){
evt=window.event;
}
if(typeof(evt.pageX)=='number'){
pos.x=evt.pageX;
pos.y=evt.pageY;
}
else{
pos.x=evt.clientX;
pos.y=evt.clientY;
if(!top.opera){
if((!window.document.compatMode)||(window.document.compatMode=='BackCompat')){
pos.x+=window.document.body.scrollLeft;
pos.y+=window.document.body.scrollTop;
}
else{
pos.x+=window.document.documentElement.scrollLeft;
pos.y+=window.document.documentElement.scrollTop;
}
}
}
returnpos;
}
//GetstheIDofaframegivenareferencetoawindowobject.
//AlsostoresareferencetotheIFRAMEobjectandit'swindowobject
functionDIF_getIframeId(win){
//Loopthroughthewindow'sIFRAMEobjectslookingforamatchingwindowobject
variframes=document.getElementsByTagName("IFRAME");
for(vari=0;i<iframes.length;i++){
varo=iframes.item(i);
varw=null;
if(o.contentWindow){
//ForIE5.5andIE6
w=o.contentWindow;
}
elseif(window.frames&&window.frames[o.id].window){
w=window.frames[o.id];
}
if(w==win){
DIF_iframeWindows[o.id]=win;
DIF_iframeObjects[o.id]=o;
returno.id;
}
}
returnnull;
}
//Getsthepagex,ycoordinatesoftheiframe(oranyobject)
functionDIF_getObjectXY(o){
varres=newObject();
res.x=0;res.y=0;
if(o!=null){
res.x=o.style.left.substring(0,o.style.left.indexOf("px"));
res.y=o.style.top.substring(0,o.style.top.indexOf("px"));
}
returnres;
}
//Functiontogetthesrcelementclickedfornon-IEbrowsers
functiongetSrcElement(e){
vartgt=e.target;
while(tgt.nodeType!=1){tgt=tgt.parentNode;}
returntgt;
}
//Checkifobjectclickedisa'handle'-walkupthenodetreeifrequired
functionisHandleClicked(handle,objectClicked){
if(handle==objectClicked){returntrue;}
while(objectClicked.parentNode!=null){
if(objectClicked==handle){
returntrue;
}
objectClicked=objectClicked.parentNode;
}
returnfalse;
}
//Calledwhenuserclicksaniframethathasahandleinittobegindragging
functionDIF_begindrag(e,win){
//GettheIFRAMEIDthatwasclickedon
variframename=DIF_getIframeId(win);
if(iframename==null){return;}
//MakesurethatthisIFRAMEhasahandleandthatthehandlewasclicked
if(DIF_handles[iframename]==null||DIF_handles[iframename].length<1){
return;
}
varisHandle=false;
vart=e.srcElement||getSrcElement(e);
for(vari=0;i<DIF_handles[iframename].length;i++){
if(isHandleClicked(DIF_handles[iframename][i],t)){
isHandle=true;
break;
}
}
if(!isHandle){returnfalse;}
DIF_iframeBeingDragged=iframename;
if(DIF_raiseSelectedIframe){
DIF_iframeObjects[DIF_iframeBeingDragged].style.zIndex=DIF_highestZIndex++;
}
DIF_dragging=true;
varpos=DIF_getEventPosition(e);
DIF_iframeMouseDownLeft[DIF_iframeBeingDragged]=pos.x;
DIF_iframeMouseDownTop[DIF_iframeBeingDragged]=pos.y;
varo=DIF_getObjectXY(DIF_iframeObjects[DIF_iframeBeingDragged]);
DIF_pageMouseDownLeft[DIF_iframeBeingDragged]=o.x-0+pos.x;
DIF_pageMouseDownTop[DIF_iframeBeingDragged]=o.y-0+pos.y;
}
//Calledwhenmousebuttonisreleasedafterdragginganiframe
functionDIF_enddrag(e){
DIF_dragging=false;
DIF_iframeBeingDragged="";
}
//Calledwhenmousemovesinthemainwindow
functionDIF_mouseMove(e){
if(DIF_dragging){
varpos=DIF_getEventPosition(e);
DIF_drag(pos.x-DIF_pageMouseDownLeft[DIF_iframeBeingDragged],pos.y-DIF_pageMouseDownTop[DIF_iframeBeingDragged]);
}
}
//CalledwhenmousemovesintheIFRAMEwindow
functionDIF_iframemove(e){
if(DIF_dragging){
varpos=DIF_getEventPosition(e);
DIF_drag(pos.x-DIF_iframeMouseDownLeft[DIF_iframeBeingDragged],pos.y-DIF_iframeMouseDownTop[DIF_iframeBeingDragged]);
}
}
//Functionwhichactuallymovesoftheiframeobjectonthescreen
functionDIF_drag(x,y){
varo=DIF_getObjectXY(DIF_iframeObjects[DIF_iframeBeingDragged]);
//Don'tdragitoffthetoporleftofthescreen?
varnewPositionX=o.x-0+x;
varnewPositionY=o.y-0+y;
if(!DIF_allowDragOffScreen){
if(newPositionX<0){newPositionX=0;}
if(newPositionY<0){newPositionY=0;}
}
DIF_iframeObjects[DIF_iframeBeingDragged].style.left=newPositionX+"px";
DIF_iframeObjects[DIF_iframeBeingDragged].style.top=newPositionY+"px";
DIF_pageMouseDownLeft[DIF_iframeBeingDragged]+=x;
DIF_pageMouseDownTop[DIF_iframeBeingDragged]+=y;
}
在线演示http://img.jb51.net/online/IFRAMEWindows/index.html
打包下载IFRAMEWindows.rar