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

Question

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>

Answer 1

<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>  -&gt;<a href=/main.php class=head-l>中心广场</span></a>-&gt;工地</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>&nbsp;&nbsp;&nbsp;天 气：<img src=http://img.the9.com/img/work/building/game/cloudy.gif align=bottom alt= 果。> 多云 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;材 质：<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>&nbsp;&nbsp;&nbsp;
       </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>

Answer 2

<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 **************************

Answer 3

blockx，blocky是未摆设div存放位置，拼错了恢复到该位置range是变化范围，即允许的误差xmin,ymin是正确位置，xmax,ymax是允许拖动的右限和下限，
[xmin-xmax][ymin-ymax]该范围恢复到[xmin,ymin]进入[X_MIN-X_MAX][Y_MIN-Y_MAX]就开始判断是否正确