关于图片拖放 目的位置 范围的设定!我实在是弄不了了,各位大虾帮我看看吧!

cclq 2002-08-28 04:50:56
加精
下面的是一个html文件代码(比较长),是从www.the9.com上面搞到的,目的是这样的:
例如:
1:dfsfsdf a:fsdfsdf
2:fsdfdfsd b:fdfsfdf
3:fdfdsfdf c:sdfdfsd
---------------------------------------------
我想1与3对应,2与1对应...我把1中的图片拖放到3上面,就会提示我的拖放是对的
要是拖放到别的上面在提交后则提示错误!

问题是,我如何去有效限制右边目的位置区域的范围,(怎样为每个图片设定她的正确范围)下面代码的参数是不是涉及屏幕的坐标?(xmin,ymin,xmax,ymax,)
以及blockp,blockx,blocky这些参数的意思?

************************begin***********************

<html>
<head>
<title>安装门窗</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
.background { background:url(http://img.the9.com/img/work/building/bgtu01.gif) #D0E8A0 left bottom no-repeat}
-->
</style>
<link href=http://img.the9.com/st/the9.css rel=stylesheet type=text/css>
<script src=http://img.the9.com/js/head.js></script>
<script src=http://img.the9.com/js/the9.js></script>
<script src=http://img.the9.com/js/layer_obj2.js></script>
<script language="javascript">
var ns=document.layers?true:false;
var ie=document.all?true:false;
var iBakLeft,iBakTop;
var range=3;
var time=60;
var step=40;
var X_MIN=298;
var X_MAX=613;
var Y_MIN=228;
var Y_MAX=402;
var blockx= new Array();
var blocky= new Array();
var blockp= new Array();
blockp[158]=158;
blockx[158]=20;
blocky[158]=280;
blockp[159]=159;
blockx[159]=73;
blocky[159]=280;
blockp[160]=160;
blockx[160]=126;
blocky[160]=280;
blockp[161]=161;
blockx[161]=179;
blocky[161]=280;
blockp[162]=162;
blockx[162]=20;
blocky[162]=330;
blockp[163]=163;
blockx[163]=73;
blocky[163]=330;
blockp[164]=164;
blockx[164]=126;
blocky[164]=330;
blockp[165]=165;
blockx[165]=179;
blocky[165]=330;
blockp[166]=166;
blockx[166]=20;
blocky[166]=380;
var timecontent='时间到了!\你今天干完了吗?\看看你今天的工钱!';
function dragBegin(name)
{
iBakLeft=getLeft(name);
iBakTop=getTop(name);
}

function check(layername,left,top,right,bottom,partnum)
{
var blockname,layerleft,layertop,blocknum;
var xmin=new Array();
var xmax=new Array();
var ymin=new Array();
var ymax=new Array();
xmin[158]=324;
ymin[158]=304;
xmax[158]=338;
ymax[158]=342;
xmin[159]=349;
ymin[159]=275;
xmax[159]=375;
ymax[159]=290;
xmin[160]=404;
ymin[160]=230;
xmax[160]=450;
ymax[160]=266;
xmin[161]=416;
ymin[161]=307;
xmax[161]=430;
ymax[161]=345;
xmin[162]=453;
ymin[162]=297;
xmax[162]=469;
ymax[162]=332;
xmin[163]=469;
ymin[163]=260;
xmax[163]=495;
ymax[163]=275;
xmin[164]=507;
ymin[164]=276;
xmax[164]=553;
ymax[164]=312;
xmin[165]=554;
ymin[165]=304;
xmax[165]=606;
ymax[165]=346;
xmin[166]=554;
ymin[166]=326;
xmax[166]=596;
ymax[166]=375;

if((xmin[partnum]-range<=left) && (xmax[partnum]+range>=right) &&
(ymin[partnum]-range<=top) && (ymax[partnum]+range>=bottom))
{
if(document.formPart.place0.value == partnum)
{
if(document.formPart.block0.value != "0")
{
blockname=document.formPart.block0.value;
blocknum=blockname.substr(3);
layerleft=blockx[blocknum];
layertop=blocky[blocknum];
moveLayer(blockname,layerleft,layertop);
}
document.formPart.placex0.value=xmin[partnum];
document.formPart.placey0.value=ymin[partnum];
document.formPart.block0.value=layername;
}
if(document.formPart.place1.value == partnum)
{
if(document.formPart.block1.value != "0")
{
blockname=document.formPart.block1.value;
blocknum=blockname.substr(3);
layerleft=blockx[blocknum];
layertop=blocky[blocknum];
moveLayer(blockname,layerleft,layertop);
}
document.formPart.placex1.value=xmin[partnum];
document.formPart.placey1.value=ymin[partnum];
document.formPart.block1.value=layername;
}
if(document.formPart.place2.value == partnum)
{
if(document.formPart.block2.value != "0")
{
blockname=document.formPart.block2.value;
blocknum=blockname.substr(3);
layerleft=blockx[blocknum];
layertop=blocky[blocknum];
moveLayer(blockname,layerleft,layertop);
}
document.formPart.placex2.value=xmin[partnum];
document.formPart.placey2.value=ymin[partnum];
document.formPart.block2.value=layername;
}
if(document.formPart.place3.value == partnum)
{
if(document.formPart.block3.value != "0")
{
blockname=document.formPart.block3.value;
blocknum=blockname.substr(3);
layerleft=blockx[blocknum];
layertop=blocky[blocknum];
moveLayer(blockname,layerleft,layertop);
}
document.formPart.placex3.value=xmin[partnum];
document.formPart.placey3.value=ymin[partnum];
document.formPart.block3.value=layername;
}
if(document.formPart.place4.value == partnum)
{
if(document.formPart.block4.value != "0")
{
blockname=document.formPart.block4.value;
blocknum=blockname.substr(3);
layerleft=blockx[blocknum];
layertop=blocky[blocknum];
moveLayer(blockname,layerleft,layertop);
}
document.formPart.placex4.value=xmin[partnum];
document.formPart.placey4.value=ymin[partnum];
document.formPart.block4.value=layername;
}
if(document.formPart.place5.value == partnum)
{
if(document.formPart.block5.value != "0")
{
blockname=document.formPart.block5.value;
blocknum=blockname.substr(3);
layerleft=blockx[blocknum];
layertop=blocky[blocknum];
moveLayer(blockname,layerleft,layertop);
}
document.formPart.placex5.value=xmin[partnum];
document.formPart.placey5.value=ymin[partnum];
document.formPart.block5.value=layername;
}
if(document.formPart.place6.value == partnum)
{
if(document.formPart.block6.value != "0")
{
blockname=document.formPart.block6.value;
blocknum=blockname.substr(3);
layerleft=blockx[blocknum];
layertop=blocky[blocknum];
moveLayer(blockname,layerleft,layertop);
}
document.formPart.placex6.value=xmin[partnum];
document.formPart.placey6.value=ymin[partnum];
document.formPart.block6.value=layername;
}
if(document.formPart.place7.value == partnum)
{
if(document.formPart.block7.value != "0")
{
blockname=document.formPart.block7.value;
blocknum=blockname.substr(3);
layerleft=blockx[blocknum];
layertop=blocky[blocknum];
moveLayer(blockname,layerleft,layertop);
}
document.formPart.placex7.value=xmin[partnum];
document.formPart.placey7.value=ymin[partnum];
document.formPart.block7.value=layername;
}
if(document.formPart.place8.value == partnum)
{
if(document.formPart.block8.value != "0")
{
blockname=document.formPart.block8.value;
blocknum=blockname.substr(3);
layerleft=blockx[blocknum];
layertop=blocky[blocknum];
moveLayer(blockname,layerleft,layertop);
}
document.formPart.placex8.value=xmin[partnum];
document.formPart.placey8.value=ymin[partnum];
document.formPart.block8.value=layername;
}

moveLayer(layername,xmin[partnum],ymin[partnum]);
return true; /*正确*/
}
else return false; /*错误*/
}

...全文
51 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
希偌 2002-08-29
  • 打赏
  • 举报
回复
有秋水的地方,就不会有搞不定的问题,^V^
qiushuiwuhen 2002-08-28
  • 打赏
  • 举报
回复
blockx,blocky是未摆设div存放位置,拼错了恢复到该位置

range是变化范围,即允许的误差

xmin,ymin是正确位置,xmax,ymax是允许拖动的右限和下限,
[xmin-xmax][ymin-ymax]该范围恢复到[xmin,ymin]

进入[X_MIN-X_MAX][Y_MIN-Y_MAX]就开始判断是否正确
cclq 2002-08-28
  • 打赏
  • 举报
回复
<form name=formMain>
<input type=hidden name=layername0>
<input type=hidden name=layername1>
<input type=hidden name=layername2>
<input type=hidden name=layername3>
<input type=hidden name=layername4>
<input type=hidden name=layername5>
<input type=hidden name=layername6>
<input type=hidden name=layername7>
<input type=hidden name=layername8>
</form>

</td>
<td background=http://img.the9.com/img/work/building/bg04.gif><img src=http://img.the9.com/img/empty.gif width=20 height=188></td>
</tr>
<tr>
<td><img src=http://img.the9.com/img/work/building/corner03.gif></td>
<td background=http://img.the9.com/img/work/building/bg03.gif><img src=http://img.the9.com/img/empty.gif width=418 height=22></td>
<td><img src=http://img.the9.com/img/work/building/corner04.gif></td>
</tr>
</table>

<table border=0 cellspacing=0 cellpadding=0 width=418>
<tr>
<td class=ct-def1 align=right><br><br><a href="javascript:checkblock();">确定 <img src=http://img.the9.com/img/work/building/comein.gif border=0 align=absbottom alt=确定></a></td>
</tr>
</table>

</td>
<td><img src=http://img.the9.com/img/empty.gif width=44 height=1></td>
</tr></table>

<script language=Javascript>ShowFooter();</script>

<script language="JavaScript">
var ns=document.layers?true:false;
var ie=document.all?true:false;

var name='main';
var content='<img src="http://img.the9.com/img/work/make/4/pic/0201a.gif">';
createLayer(name,298,228,315,174,true,content,0);
layerSetMove(name,0);

var name='div158';
var content='<img src="http://img.the9.com/img/work/make/4/block/0201158.gif" alt="">';
createLayer(name,20,280,14,38,true,content,1);
document.formMain.layername0.value=name;
var name='div159';
var content='<img src="http://img.the9.com/img/work/make/4/block/0201159.gif" alt="">';
createLayer(name,73,280,26,15,true,content,1);
document.formMain.layername1.value=name;
var name='div160';
var content='<img src="http://img.the9.com/img/work/make/4/block/0201160.gif" alt="">';
createLayer(name,126,280,46,36,true,content,1);
document.formMain.layername2.value=name;
var name='div161';
var content='<img src="http://img.the9.com/img/work/make/4/block/0201161.gif" alt="">';
createLayer(name,179,280,14,38,true,content,1);
document.formMain.layername3.value=name;
var name='div162';
var content='<img src="http://img.the9.com/img/work/make/4/block/0201162.gif" alt="">';
createLayer(name,20,330,16,35,true,content,1);
document.formMain.layername4.value=name;
var name='div163';
var content='<img src="http://img.the9.com/img/work/make/4/block/0201163.gif" alt="">';
createLayer(name,73,330,26,15,true,content,1);
document.formMain.layername5.value=name;
var name='div164';
var content='<img src="http://img.the9.com/img/work/make/4/block/0201164.gif" alt="">';
createLayer(name,126,330,46,36,true,content,1);
document.formMain.layername6.value=name;
var name='div165';
var content='<img src="http://img.the9.com/img/work/make/4/block/0201165.gif" alt="">';
createLayer(name,179,330,52,42,true,content,1);
document.formMain.layername7.value=name;
var name='div166';
var content='<img src="http://img.the9.com/img/work/make/4/block/0201166.gif" alt="">';
createLayer(name,20,380,42,49,true,content,1);
document.formMain.layername8.value=name;

</script>
</body>
</html>

********************* end **************************
cclq 2002-08-28
  • 打赏
  • 举报
回复
<body bgcolor=#ffffff topmargin=0 leftmargin=0 marginheight=0 marginwidth=0 onLoad="javascript:layerEventInitDrag(dragBegin,dragEnd);">
<script language=Javascript>ShowHeaderMain();</script>
<table border=0 width=760 height=24 cellspacing=0 cellpadding=0 bgcolor=#000000>
<td width=48><img src=http://img.the9.com/img/empty.gif></td>
<td width=34><img src=http://img.the9.com/img/position.gif></td>
<td width=660 class=head-l> -><a href=/main.php class=head-l>中心广场</span></a>->工地</td>
<td width=18 align=right valign=top><img src=http://img.the9.com/img/rc.gif></td>
</tr></table>
<table border=0 width=760 height=3 cellspacing=0 cellpadding=0 bgcolor=#90C078>
<tr><td><img src=http://img.the9.com/img/empty.gif></td></tr></table>

<table border=0 cellspacing=0 cellpadding=0 width=760 bgcolor=#D0E8A0>
<tr>
<td><img src=http://img.the9.com/img/empty.gif width=33 height=1></td>
<td><img src=http://img.the9.com/img/work/building/logo03.gif alt=营造家园></td>
<td><br><img src=http://img.the9.com/img/work/building/man03.gif></td>
<td class=ct-def3 width=301>   天 气:<img src=http://img.the9.com/img/work/building/game/cloudy.gif align=bottom alt= 果。> 多云      材 质:<img src=http://img.the9.com/img/work/building/game/middling.gif alt=今 所 般。> 中</td>
<td><img src=http://img.the9.com/img/empty.gif width=82 height=1></td>
</tr></table>

<table border=0 cellspacing=0 cellpadding=0 width=760 bgcolor=#D0E8A0 class=background>
<tr>
<td height=308><img src=http://img.the9.com/img/empty.gif width=33 height=1></td>
<td class=ct-def1 valign=top>■ 安装门窗:<br>

<table border=0 cellspacing=0 cellpadding=0 width=100% bgcolor=#D0E8A0>
<tr>
<td class=ct-def1 valign=top>按下“开始”钮后,右图中黑色部位的门窗安装未完成,请把不同的门窗安装入右图相应的位置中。</td>
</tr>
</table>

</td>
<td><img src=http://img.the9.com/img/empty.gif width=35 height=1></td>
<td width=468 valign=top>

<table border=0 cellspacing=0 cellpadding=0 width=468>
<tr>
<td><img src=http://img.the9.com/img/work/building/corner01.gif></td>
<td background=http://img.the9.com/img/work/building/bg01.gif><img src=http://img.the9.com/img/empty.gif width=418 height=22></td>
<td><img src=http://img.the9.com/img/work/building/corner02.gif></td>
</tr>
<tr>
<td background=http://img.the9.com/img/work/building/bg02.gif><img src=http://img.the9.com/img/empty.gif width=30 height=188></td>
<td width=418 valign=top bgcolor=#E0F4C0>

<form name=formPart method=post action="/work/build/ctl_work_build.php?action=switch">
<table border=0 cellspacing=0 cellpadding=0 width=418>
<tr>
<td><img src=http://img.the9.com/img/empty.gif width=315 height=174></td>
<td valign=bottom><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="javascript:cliplay2();"><img src=http://img.the9.com/img/work/building/game/begin.gif border=0 alt=开始></a><br><br>

</td>
</tr>
<tr><td>

<table>
<tr>
<td valign=top height=100>
<br><div id=timeline style="position:absolute; width:18px; height:80px; z-index:0"><img src=http://img.the9.com/img/work/building/game/time.gif alt=时间></div>   
</td>
<td valign=top height=100>
<br><div id=timeline2 style="position:absolute; width:18px; height:80px; z-index:0"><img src=http://img.the9.com/img/work/building/game/time.gif alt=时间></div>
</td>
</tr>
</table>

</td></tr>
</table>

<input type=hidden name=placex0>
<input type=hidden name=placey0>
<input type=hidden name=place0 value=158>
<input type=hidden name=block0 value="0">
<input type=hidden name=placex1>
<input type=hidden name=placey1>
<input type=hidden name=place1 value=159>
<input type=hidden name=block1 value="0">
<input type=hidden name=placex2>
<input type=hidden name=placey2>
<input type=hidden name=place2 value=160>
<input type=hidden name=block2 value="0">
<input type=hidden name=placex3>
<input type=hidden name=placey3>
<input type=hidden name=place3 value=161>
<input type=hidden name=block3 value="0">
<input type=hidden name=placex4>
<input type=hidden name=placey4>
<input type=hidden name=place4 value=162>
<input type=hidden name=block4 value="0">
<input type=hidden name=placex5>
<input type=hidden name=placey5>
<input type=hidden name=place5 value=163>
<input type=hidden name=block5 value="0">
<input type=hidden name=placex6>
<input type=hidden name=placey6>
<input type=hidden name=place6 value=164>
<input type=hidden name=block6 value="0">
<input type=hidden name=placex7>
<input type=hidden name=placey7>
<input type=hidden name=place7 value=165>
<input type=hidden name=block7 value="0">
<input type=hidden name=placex8>
<input type=hidden name=placey8>
<input type=hidden name=place8 value=166>
<input type=hidden name=block8 value="0">
<input type=hidden name=placenum value=9> <input type=hidden name=iSubmitblock>
</form>

</td>
</tr>
</table>
cclq 2002-08-28
  • 打赏
  • 举报
回复

function resetflag(name)
{
if(document.formPart.block0.value == name)
{
document.formPart.placex0.value="";
document.formPart.placey0.value="";
document.formPart.block0.value="0";
}
if(document.formPart.block1.value == name)
{
document.formPart.placex1.value="";
document.formPart.placey1.value="";
document.formPart.block1.value="0";
}
if(document.formPart.block2.value == name)
{
document.formPart.placex2.value="";
document.formPart.placey2.value="";
document.formPart.block2.value="0";
}
if(document.formPart.block3.value == name)
{
document.formPart.placex3.value="";
document.formPart.placey3.value="";
document.formPart.block3.value="0";
}
if(document.formPart.block4.value == name)
{
document.formPart.placex4.value="";
document.formPart.placey4.value="";
document.formPart.block4.value="0";
}
if(document.formPart.block5.value == name)
{
document.formPart.placex5.value="";
document.formPart.placey5.value="";
document.formPart.block5.value="0";
}
if(document.formPart.block6.value == name)
{
document.formPart.placex6.value="";
document.formPart.placey6.value="";
document.formPart.block6.value="0";
}
if(document.formPart.block7.value == name)
{
document.formPart.placex7.value="";
document.formPart.placey7.value="";
document.formPart.block7.value="0";
}
if(document.formPart.block8.value == name)
{
document.formPart.placex8.value="";
document.formPart.placey8.value="";
document.formPart.block8.value="0";
}

}

function dragEnd(name)
{
var myleft=getLeft(name);
var mytop=getTop(name);
var myright=getRight(name);
var mybottom=getBottom(name);
var bUpdate=false;
var ret,part,num;
resetflag(name);
if(myright<X_MIN) bUpdate=true;
if(mybottom<Y_MIN) bUpdate=true;
if(myleft>X_MAX) bUpdate=true;
if(mytop>Y_MAX) bUpdate=true;
//alert("myright:"+myright+" mybottom:"+mybottom+" myleft:"+myleft+" mytop:"+mytop);
if(bUpdate==false)
{
part=document.formPart.place0.value;
ret0=check(name,myleft,mytop,myright,mybottom,part);
part=document.formPart.place1.value;
ret1=check(name,myleft,mytop,myright,mybottom,part);
part=document.formPart.place2.value;
ret2=check(name,myleft,mytop,myright,mybottom,part);
part=document.formPart.place3.value;
ret3=check(name,myleft,mytop,myright,mybottom,part);
part=document.formPart.place4.value;
ret4=check(name,myleft,mytop,myright,mybottom,part);
part=document.formPart.place5.value;
ret5=check(name,myleft,mytop,myright,mybottom,part);
part=document.formPart.place6.value;
ret6=check(name,myleft,mytop,myright,mybottom,part);
part=document.formPart.place7.value;
ret7=check(name,myleft,mytop,myright,mybottom,part);
part=document.formPart.place8.value;
ret8=check(name,myleft,mytop,myright,mybottom,part);
if(ret0==true) bUpdate=true;
if(ret1==true) bUpdate=true;
if(ret2==true) bUpdate=true;
if(ret3==true) bUpdate=true;
if(ret4==true) bUpdate=true;
if(ret5==true) bUpdate=true;
if(ret6==true) bUpdate=true;
if(ret7==true) bUpdate=true;
if(ret8==true) bUpdate=true;

}
if(bUpdate==true) return;
else
{
alert("该拼图放错了!");
revert(name);
return;
}
}

function revert(name)
{
var layerleft,layertop,num;
num=name.substring(3);
layerleft=blockx[num];
layertop=blocky[num];
moveLayer(name,layerleft,layertop);
return;
}

var isSubmited = 0;
function checkblock()
{
if (isSubmited)
{
alert("不要连续多次点击,请刷新页面");
history.back();
return;
}
else {
isSubmited = 1;
}
document.formPart.iSubmitblock.value=1;
document.formPart.submit();
}

function beginmove()
{
var name;
name='div158';layerSetMove(name,-1);
name='div159';layerSetMove(name,-1);
name='div160';layerSetMove(name,-1);
name='div161';layerSetMove(name,-1);
name='div162';layerSetMove(name,-1);
name='div163';layerSetMove(name,-1);
name='div164';layerSetMove(name,-1);
name='div165';layerSetMove(name,-1);
name='div166';layerSetMove(name,-1);

}

cliptt=0;timm=0;
function cliplay2()
{
var set=Math.round(time/step)*1000;
beginmove();
cliptt+=4;
timm++;
if (timm<=20)
{
timeline2.style.clip="rect("+cliptt+"px 18px 80px 0px)";
var timer=setTimeout("cliplay2()",set);
timer;
}
if(timm>20 && timm<=40)
{
timeline.style.clip="rect("+(cliptt-80)+"px 18px 80px 0px)";
var timer1=setTimeout("cliplay2()",set);
timer;
}
if (timm==40)
{
clearTimeout("timer");
alert(timecontent);
document.formPart.iSubmitblock.value=1;
document.formPart.submit();
}
}
</script>

</head>



87,996

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧