div拖拽层特效
<html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="JavaScript"> <!-- <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); // --> function MM_findObj(n, d) { //v4.0 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && document.getElementById) x=document.getElementById(n); return x; } function MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS) { //v3.0 //Copyright 1998 Macromedia, Inc. All rights reserved. var i,j,aLayer,retVal,curDrag=null,NS=(navigator.appName=='Netscape'), curLeft, curTop; if (!document.all && !document.layers) return false; retVal = true; if(!NS && event) event.returnValue = true; if (MM_dragLayer.arguments.length > 1) { curDrag = MM_findObj(objName); if (!curDrag) return false; if (!document.allLayers) { document.allLayers = new Array(); with (document) if (NS) { for (i=0; i<layers.length; i++) allLayers[i]=layers[i]; for (i=0; i<allLayers.length; i++) if (allLayers[i].document && allLayers[i].document.layers) with (allLayers[i].document) for (j=0; j<layers.length; j++) allLayers[allLayers.length]=layers[j]; } else for (i=0;i<all.length;i++) if (all[i].style&&all[i].style.position) allLayers[allLayers.length]=all[i];} curDrag.MM_dragOk=true; curDrag.MM_targL=targL; curDrag.MM_targT=targT; curDrag.MM_tol=Math.pow(tol,2); curDrag.MM_hLeft=hL; curDrag.MM_hTop=hT; curDrag.MM_hWidth=hW; curDrag.MM_hHeight=hH; curDrag.MM_toFront=toFront; curDrag.MM_dropBack=dropBack; curDrag.MM_dropJS=dropJS; curDrag.MM_everyTime=et; curDrag.MM_dragJS=dragJS; curDrag.MM_oldZ = (NS)?curDrag.zIndex:curDrag.style.zIndex; curLeft= (NS)?curDrag.left:curDrag.style.pixelLeft; curDrag.MM_startL = curLeft; curTop = (NS)?curDrag.top:curDrag.style.pixelTop; curDrag.MM_startT = curTop; curDrag.MM_bL=(cL<0)?null:curLeft-cL; curDrag.MM_bT=(cU<0)?null:curTop -cU; curDrag.MM_bR=(cR<0)?null:curLeft+cR; curDrag.MM_bB=(cD<0)?null:curTop +cD; curDrag.MM_LEFTRIGHT=0; curDrag.MM_UPDOWN=0; curDrag.MM_SNAPPED=false; //use in your JS! document.onmousedown = MM_dragLayer; document.onmouseup = MM_dragLayer; if (NS) document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP); } else { var theEvent = ((NS)?objName.type:event.type); if (theEvent == 'mousedown') { var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft; var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop; var maxDragZ=null; document.MM_maxZ = 0; for (i=0; i<document.allLayers.length; i++) { aLayer = document.allLayers[i]; var aLayerZ = (NS)?aLayer.zIndex:aLayer.style.zIndex; if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ; var isVisible = (((NS)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1); if (aLayer.MM_dragOk != null && isVisible) with (aLayer) { var parentL=0; var parentT=0; if (!NS) { parentLayer = aLayer.parentElement; while (parentLayer != null && parentLayer.style.position) { parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop; parentLayer = parentLayer.parentElement; } } var tmpX=mouseX-(((NS)?pageX:style.pixelLeft+parentL)+MM_hLeft); var tmpY=mouseY-(((NS)?pageY:style.pixelTop +parentT)+MM_hTop); var tmpW = MM_hWidth; if (tmpW <= 0) tmpW += ((NS)?clip.width :offsetWidth); var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += ((NS)?clip.height:offsetHeight); if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null || maxDragZ <= aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } } if (curDrag) { document.onmousemove = MM_dragLayer; if (NS) document.captureEvents(Event.MOUSEMOVE); curLeft = (NS)?curDrag.left:curDrag.style.pixelLeft; curTop = (NS)?curDrag.top:curDrag.style.pixelTop; MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop; document.MM_curDrag = curDrag; curDrag.MM_SNAPPED=false; if(curDrag.MM_toFront) { eval('curDrag.'+((NS)?'':'style.')+'zIndex=document.MM_maxZ+1'); if (!curDrag.MM_dropBack) document.MM_maxZ++; } retVal = false; if(!NS) event.returnValue = false; } } else if (theEvent == 'mousemove') { if (document.MM_curDrag) with (document.MM_curDrag) { var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft; var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop; newLeft = mouseX-MM_oldX; newTop = mouseY-MM_oldY; if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL); if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR); if (MM_bT!=null) newTop = Math.max(newTop ,MM_bT); if (MM_bB!=null) newTop = Math.min(newTop ,MM_bB); MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT; if (NS) {left = newLeft; top = newTop;} else {style.pixelLeft = newLeft; style.pixelTop = newTop;} if (MM_dragJS) eval(MM_dragJS); retVal = false; if(!NS) event.returnValue = false; } } else if (theEvent == 'mouseup') { document.onmousemove = null; if (NS) document.releaseEvents(Event.MOUSEMOVE); if (NS) document.captureEvents(Event.MOUSEDOWN); //for mac NS if (document.MM_curDrag) with (document.MM_curDrag) { if (typeof MM_targL =='number' && typeof MM_targT == 'number' && (Math.pow(MM_targL-((NS)?left:style.pixelLeft),2)+ Math.pow(MM_targT-((NS)?top:style.pixelTop),2))<=MM_tol) { if (NS) {left = MM_targL; top = MM_targT;} else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;} MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT; } if (MM_everyTime || MM_SNAPPED) eval(MM_dropJS); if(MM_dropBack) {if (NS) zIndex = MM_oldZ; else style.zIndex = MM_oldZ;} retVal = false; if(!NS) event.returnValue = false; } document.MM_curDrag = null; } if (NS) document.routeEvent(objName); } return retVal; } //--> </script> <style type="text/css"> <!-- .5d { font-size: 12px; color: #000000; text-decoration: none; letter-spacing: 2px; word-spacing: 3px} .d1 { font-size: 12px; color: #FFFFFF; text-decoration: none; background-color: #666666} --> </style> </head> <body bgcolor="#ffffff" text="#000000" link="#FFCC00" vlink="#FF0000" alink="#FF6600" onLoad="MM_dragLayer('Layer1','',0,0,0,0,true,false,-1,-1,-1,-1,false,false,0,'',false,'');MM_dragLayer('nb1','',0,0,0,0,true,false,25,5,75,75,false,false,0,'',false,'');MM_dragLayer('nc','',0,0,0,0,true,false,-1,-1,-1,-1,160,210,500,'',false,'');MM_dragLayer('nd','',0,0,80,20,true,false,-1,-1,-1,-1,39,327,200,'',false,'');MM_dragLayer('Layer2','',0,0,50,20,true,false,0,150,0,150,111,568,50,'',false,'');MM_dragLayer('Layer4','',0,0,0,0,true,false,0,150,100,50,false,false,0,'',false,'')"> <table width="701" border="0" cellspacing="1" cellpadding="0" bordercolor="#FFFFFF" bgcolor="#FFFFFF" height="1000"> <tr> <td height="60" valign="top" bgcolor="#0099CC" width="200"> <div id="Layer1" style="position:absolute; width:50; height:50; z-index:1; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000; visibility: visible"><font color="#FFFFFF" size="2">1.</font></div> <font color="#FFFFFF" size="2">演示1。</font></td> <td valign="top" class="5d" width="500" height="60"><font color="#FF0000">层拖拽行为解析(Darg Layer Behaviors)</font>:<br> <br> 首先我们来看一个层拖拽行为的最基本演示(见右侧)。这里只是指定了一个层(Layer),然后打开行为面板(Behaviors)选择拖拽(Darg Layer),不做任何设置,点击OK即可。默认的鼠标事件为转载(OnLoad)。从这个演示中我们可以看到,当点击并按住鼠标在层的任何部位时开始实现拖拽,你可以将层拖拽到场景中的任何一个地方。</td> </tr> <tr> <td bgcolor="#0099CC" height="80" valign="top" width="200"> <div id="nb" style="position:absolute; width:200; height:80; z-index:2"> <div id="nb1" style="position:absolute; width:50; height:50; z-index:1; background-color: #FF6600; layer-background-color: #FF6600; border: 1px none #000000; left: 75px; top: 25px"><font size="2">2.</font></div> <font size="2">演示2。</font></div> </td> <td height="80" valign="top" width="500" class="5d">再看左侧的第二个演示。在这个演示中,层的拖动范围是做了限定的。也就是说针对该层的拖拽只在我们指定的范围内有效。拖动范围的设定是在Darg Layer-Movement(运动)对话框中进行的。在Movement下拉选项中有两个可选项,第一个为默认项Uncontrained(未约束的),第二项Constrained(约束的)就是用来设置可拖动范围的项目。在该项中可以指定针对某层相对于编辑区Up(上)、Down(下)、Left(左)及Right(右)的各个位置。</td> </tr> <tr> <td bgcolor="#0099CC" height="120" width="200" valign="top"> <div id="nc" style="position:absolute; width:50; height:50; z-index:3; background-color: #FF9900; layer-background-color: #FF9900; border: 1px none #000000; left: 160; top: 210"><font size="2">3.</font></div> <font size="2">演示3。</font></td> <td height="120" valign="top" class="5d" width="500">第三个演示应用了拖拽行为中的Snap if Within()pixels of Drop Target(于某范围内贴紧目标)。需要说明的是,该功能只能对绝对定位的层产生效果,因为在设定贴紧目标范围之前必须要取得指定层的坐标,如果该层是相对定位的,也就没有了左边及上边的坐标值。在这种情况下我们就不能获得层的确切坐标。当在层相对定位的情况下获取坐标时DW会自动弹出一个提示框说明无法获得层位置。当我们获取了层的位置后,就可以在()pixels中写如一个数值了,默认的数值为50像素.这个数值代表了,在距离这个层(获取坐标的层)50个像素的范围内,拖拽的层在鼠标释放时会自动的帖紧目标.在左面的这个演示里只用到了一个层,如果您想了解到更详细明确的"帖紧目标"的概念可以自己动手作一下测试.<br> </td> </tr> <tr> <td bgcolor="#0099CC" height="100" width="200" valign="top"> <div id="nd" style="position:absolute; width:80; height:50; z-index:7; background-color: #FFCC00; layer-background-color: #FFCC00; border: 1px none #000000; left: 39px; top: 327px"> <table width="80" border="0" cellspacing="0" cellpadding="0"> <tr valign="top"> <td colspan="2" bgcolor="#000000" class="d1"><font size="2" face="宋体">4.拖动这里</font></td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </div> <font size="2">演示4。</font></td> <td height="100" valign="top" class="5d" width="500">观察左面的演示,我们会得到这样一个结论:拖拽层时触发鼠标事件的范围是可指定的。<br> 触发鼠标事件的有效范围是在Drag Layer-Advancend(条件)-Drag handle(触发拖拽)项目中指定的。在Drag Hanfle选项的下拉列表中有两个可选项,第一个为默认项Entire layer(全部层),第二项Area Within Layer(层内范围)就是我们用来指定触发鼠标事件的项目。选择这一项,在对话框的左侧就会出现 T-(距离层顶部) L-(距离层左部) W-(有效范围的长度) H-(有效范围的高度)这四个待定数据项。多数的情况下,我们都无须指定T及L的数值,因为除了特殊的需要,我们都不会把触发鼠标事件的有效范围定义在中间或者其他角落这种特殊的位置.</td> </tr> <tr> <td bgcolor="#0099CC" width="200" valign="top"> <table width="200" border="0" cellspacing="1" cellpadding="0" height="200"> <tr bgcolor="#006699"> <td valign="top" class="5d" width="100">完整的演示</td> <td valign="top" width="100" height="99"> </td> </tr> <tr bgcolor="#006699"> <td valign="top"> </td> <td valign="top"> </td> </tr> </table> </td> <td width="500" valign="top" class="5d">左面是一个拖拽行为的完整演示.如果你细心的观察会发现,当两个层为重叠状态时点击任意层,受点击的层就会自动的跳到最上面来.这个小功能就是Advancend设置栏中While Dragging Bring Layer to Front(当拖拽停止时层处于前面)中完成的.其中While Dragging(当拖拽)有个可选项,默认为选择状态含义为"当拖拽时"层的位置,如果我们勾选掉这个项目,其含义就转变为"正常状态下"层的位置.所谓"正常状态"就是指层的索引顺序.再看右面的下拉列表,第一项" Leave on Top(留在顶部)",顾名思义,它来配合拖拽状态选项的含义就是:当层停止拖拽时,该层的位置留在顶部.第二项"Restore Z-index(恢复索引顺序).它的含义是指,保持层的先后顺序,先插入的层就在后插入层的上面,反之亦然.<br> 提示:层的索引顺序我们可以任意指定,只需选中你要改变顺序的层,打开属性面板,你就可以看到Z-index项,在这里你可以输入一个数值,来定义层的先后顺序.<br> <br> 到这里未止,我们已经把关于拖拽层行为的基本要素有了一个大概的了解.<br> <br> 在Advancend设置栏中还有两个选项没有讲,因为它是附加在拖拽行为中js事件,脱离了拖拽的范畴,所以就不做详细的介绍了.下面就简单的说一下它们的含义:<br> 一,call javascript:当鼠标开始拖拽时弹出警告.<br> 二,when Dropped call javascript()only of snapped:仅仅当拖拽放开,位置正确时触发js事件.注意:第二个功能只针对应用了"贴紧目标"的层所设.<br> <br></td> </tr> </table> <div id="Layer4" style="position:absolute; width:50; height:50; z-index:8; background-color: #33CCFF; layer-background-color: #33CCFF; border: 1px none #000000; left: 111; top: 468px"> <table width="50" border="0" cellspacing="0" cellpadding="0"> <tr bgcolor="#003399"> <td>2</td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </div> <div id="Layer3" style="position:absolute; width:50; height:50; z-index:6; background-color: #66CCFF; layer-background-color: #66CCFF; border: 1px none #000000; left: 111px; top: 568"> <table width="50" border="0" cellspacing="0" cellpadding="0"> <tr bgcolor="#66CCFF"> <td><font size="2" color="#000000">目标</font></td> <td> </td> </tr> <tr bgcolor="#66CCFF"> <td> </td> <td> </td> </tr> </table> </div> <div id="Layer2" style="position:absolute; width:50; height:50; z-index:5; left: 11px; top: 468px; background-color: #66CCFF; layer-background-color: #66CCFF; border: 1px none #000000"> <table width="50" border="0" cellspacing="0" cellpadding="0"> <tr bgcolor="#3366CC"> <td>1</td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </div> </body> </html>