拖动DIV,效果不对,不知道哪里错了,请帮忙看看
发布网友
发布时间：2022-05-06 17:28
共2个回答
热心网友
时间：2022-04-20 22:21
重新给你一个就是了
<html>
<head>
<title>mywebstudio</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
body {
background-color: #000;
}
-->
</style>
<script language="JavaScript" type="text/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.01
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 && d.getElementById) x=d.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) { //v4.01
//Copyright 1998 Macromedia, Inc. All rights reserved.
var i,j,aLayer,retVal,curDrag=null,curLeft,curTop,IE=document.all,NS4=document.layers;
var NS6=(!IE&&document.getElementById), NS=(NS4||NS6); if (!IE && !NS) return false;
retVal = true; if(IE && 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 (NS4) { 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 {
if (NS6) { var spns = getElementsByTagName("span"); var all = getElementsByTagName("div");
for (i=0;i<spns.length;i++) if (spns[i].style&&spns[i].style.position) allLayers[allLayers.length]=spns[i];}
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 = (NS4)?curDrag.zIndex:curDrag.style.zIndex;
curLeft= (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft;
if (String(curLeft)=="NaN") curLeft=0; curDrag.MM_startL = curLeft;
curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop;
if (String(curTop)=="NaN") curTop=0; 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 = (NS4)?aLayer.zIndex:parseInt(aLayer.style.zIndex);
if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;
var isVisible = (((NS4)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1);
if (aLayer.MM_dragOk != null && isVisible) with (aLayer) {
var parentL=0; var parentT=0;
if (NS6) { parentLayer = aLayer.parentNode;
while (parentLayer != null && parentLayer.style.position) {
parentL += parseInt(parentLayer.offsetLeft); parentT += parseInt(parentLayer.offsetTop);
parentLayer = parentLayer.parentNode;
} } else if (IE) { parentLayer = aLayer.parentElement;
while (parentLayer != null && parentLayer.style.position) {
parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop;
parentLayer = parentLayer.parentElement; } }
var tmpX=mouseX-(((NS4)?pageX:((NS6)?parseInt(style.left):style.pixelLeft)+parentL)+MM_hLeft);
var tmpY=mouseY-(((NS4)?pageY:((NS6)?parseInt(style.top):style.pixelTop) +parentT)+MM_hTop);
if (String(tmpX)=="NaN") tmpX=0; if (String(tmpY)=="NaN") tmpY=0;
var tmpW = MM_hWidth; if (tmpW <= 0) tmpW += ((NS4)?clip.width :offsetWidth);
var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += ((NS4)?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 (NS4) document.captureEvents(Event.MOUSEMOVE);
curLeft = (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft;
curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop;
if (String(curLeft)=="NaN") curLeft=0; if (String(curTop)=="NaN") curTop=0;
MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop;
document.MM_curDrag = curDrag; curDrag.MM_SNAPPED=false;
if(curDrag.MM_toFront) {
eval('curDrag.'+((NS4)?'':'style.')+'zIndex=document.MM_maxZ+1');
if (!curDrag.MM_dropBack) document.MM_maxZ++; }
retVal = false; if(!NS4&&!NS6) 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 (NS4) {left = newLeft; top = newTop;}
else if (NS6){style.left = newLeft; style.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-((NS4)?left:(NS6)?parseInt(style.left):style.pixelLeft),2)+
Math.pow(MM_targT-((NS4)?top:(NS6)?parseInt(style.top):style.pixelTop),2))<=MM_tol) {
if (NS4) {left = MM_targL; top = MM_targT;}
else if (NS6) {style.left = MM_targL; style.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 (NS4) 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>
</head>
<body leftmargin="0" topmargin="0" onLoad="MM_dragLayer('Layer2','',0,0,0,0,true,false,-1,-1,-1,-1,100,190,20,'',false,'');MM_dragLayer('Layer3','',0,0,0,0,true,false,-1,-1,-1,-1,197,190,20,'',false,'');MM_dragLayer('Layer4','',0,0,0,0,true,false,-1,-1,-1,-1,300,190,20,'',false,'')">
<table width="80%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" align="center">
<tr>
<td height="57" valign="top" colspan="3"> </td>
</tr>
<tr>
<td align="center" valign="middle">
<div id="Layer4" style="position:absolute; width:100px; height:164px; z-index:4; left: 548px; top: 192px;"><img src="images/3.jpg" width="100" height="164"></div>
<div id="Layer3" style="position:absolute; width:103px; height:164px; z-index:3; left: 488px; top: 212px;"><img src="images/2.jpg" width="103" height="164"></div>
<div id="Layer2" style="position:absolute; width:97px; height:164px; z-index:2; left: 430px; top: 182px;"><img src="images/1.jpg" width="97" height="164"></div></td>
</tr>
</tr>
</table>
</body>
</html>
热心网友
时间：2022-04-20 23:39
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
<!--
.aaa{
position:absolute;
display:none;
width:300px;
height:130px;
background-color:#FFFFFF;
border:1px #CCCCCC solid;
}
.b{
height:20px;
text-align:right;
font-size:12px;
border-bottom:1px #CCCCCC solid;
line-height:20px;
width:94%;
float:left;
text-align:center;
cursor:hand;
}
.c{
height:20px;
text-align:right;
font-size:12px;
border-bottom:1px #CCCCCC solid;
line-height:20px;
width:5%;
float:left;
}
.d{
font-size:12px;
padding:10px;
line-height:23px;
}
.e{
width:100%;
height:20px;
line-height:20px;
text-align:center;
}
.clear{
clear:both;
}
-->
</style>
</head>
<body>
<!----------------链接一-------------------->
<a href="#" onClick="javascript:divop('test1','show',1);" />链接1</a>
<a href="#" onClick="javascript:divop('test2','show',2);" />链接2</a>
<a href="#" onClick="javascript:divop('test3','show',3);" />链接3</a>
<a href="#" onClick="javascript:divop('test4','show',4);" />链接4</a>
</p>
<div id="test1" class="aaa">
<div class="b" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">请选择类型一</div>
<div class="c"><span style="text-decoration:underline; cursor:hand;" onClick="javascript:divop('test1','hid');">X</span> </div>
<div class="clear"></div>
<div class="d">
这里是内容
</div>
<div class="e"><input type="button" value="下一步" /> <input type="button" value="关闭" onClick="javascript:divop('test1','hid');" /></div>
</div>
<div id="test2" class="aaa">
<div class="b" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">请选择类型一</div>
<div class="c"><span style="text-decoration:underline; cursor:hand;" onClick="javascript:divop('test2','hid');">X</span> </div>
<div class="clear"></div>
<div class="d">
这里是内容
</div>
<div class="e"><input type="button" value="下一步" /> <input type="button" value="关闭" onClick="javascript:divop('test2','hid');" /></div>
</div>
<div id="test3" class="aaa">
<div class="b" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">请选择类型一</div>
<div class="c"><span style="text-decoration:underline; cursor:hand;" onClick="javascript:divop('test3','hid');">X</span> </div>
<div class="clear"></div>
<div class="d">
这里是内容
</div>
<div class="e"><input type="button" value="下一步" /> <input type="button" value="关闭" onClick="javascript:divop('test3','hid');" /></div>
</div>
<div id="test4" class="aaa">
<div class="b" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">请选择类型一</div>
<div class="c"><span style="text-decoration:underline; cursor:hand;" onClick="javascript:divop('test4','hid');">X</span> </div>
<div class="clear"></div>
<div class="d">
这里是内容
</div>
<div class="e"><input type="button" value="下一步" /> <input type="button" value="关闭" onClick="javascript:divop('test4','hid');" /></div>
</div>
<script language="javascript">
function $(id)
{
return document.getElementById(id);
}
function divop(objid,stat,num)//控制层的显示和隐藏
{
//alert(objid);
if (stat=="show")
{
$(objid).style.display="block";
$(objid).style.left=(num*20)+"px";//
$(objid).style.top=(num*100)+"px";
}
else
{
$(objid).style.display="none";
}
}
var x0=0,y0=0,x1=0,y1=0;
var moveable=false;
//开始拖动;
function startDrag(obj){
if(event.button==1){
obj.setCapture();
var win = obj.parentNode;
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(win.offsetLeft);
y1 = parseInt(win.offsetTop);
moveable = true;
}
}
//拖动;
function drag(obj){
if(moveable){
var win = obj.parentNode;
win.style.left = x1 + event.clientX - x0;
win.style.top = y1 + event.clientY - y0;
}
}
//停止拖动;
function stopDrag(obj){
if(moveable){
obj.releaseCapture();
moveable = false;
}
}
</script>
</body>
</html>
