查看完整版本: 用来实现Web页面图片移动托拽的代码段

用来实现Web页面图片移动托拽的代码段

[size=3][/size]以下这段JS是主要解决在画面生成Image项目，并通过[wiki]鼠标[/wiki]事件进行脱拽、移动等操作的代码。
%26lt;scriptlanguage="javascript"[wiki]type[/wiki]="text/javascript"%26gt;
vartop,left;
varsrc,drag,dir,ope,refer,halfwidth;
varunit=30;
vararyItems,itemNum=10,index,isInit,id,max=23;
functionPageLoad()
{
document.form1.onsubmit=OnSubmit;
aryItems=newArray(itemNum);
top=document.getElementById("TABLE").getClientRects()[0].top;
left=document.getElementById("TABLE").getClientRects()[0].left;

if(document.getElementById("__Gantt").value!=null%26%26document.getElementById("__Gantt").value!="")
{
vargantt=document.getElementById("__Gantt").value;
vararray=gantt.split(";");
varlength=array.length-1;
varstart,width,item;

for(index=0;index%26lt;length;index++)
{
item=array[index].split(",");
start=item[0];
width=item[1];

id="Item"+index;
aryItems[index]=id;

vartrack=document.createElement("IMG");
track.setAttribute("id",id);
track.setAttribute("src","blue.gif");
document.body.appendChild(track);
document.getElementById(id).style.position="absolute";
document.getElementById(id).style.top=top+unit*index;
document.getElementById(id).style.left=left+unit*start;
document.getElementById(id).width=unit*width;
document.getElementById(id).style.zIndex=9;
}
}
else
{
for(index=0;index%26lt;itemNum;index++)
{
id="Item"+index;
aryItems[index]=id;

vartrack=document.createElement("IMG");
track.setAttribute("id",id);
track.setAttribute("src","blue.gif");
document.body.appendChild(track);
document.getElementById(id).style.position="absolute";
document.getElementById(id).style.top=top+unit*index;
document.getElementById(id).style.left=left+unit*index;
document.getElementById(id).width=unit;
document.getElementById(id).style.zIndex=9;
}
}
drag=false;
left=document.getElementById(aryItems[0]).getClientRects()[0].left;
}
functionOnDrag()
{
if(event.srcElement.tagName!="IMG"%26%26!drag)
{
if(event.srcElement.id=="btnTrim")
{
//OnTrim();
}
}
else
{
if(!drag)
{
src=event.srcElement;
halfwidth=src.width/2;
drag=true;

//方向の判断
if(event.clientX%26lt;src.getClientRects()[0].left+halfwidth)
{
dir="Backward";
refer=src.getClientRects()[0].left+src.width;
}
else
{
dir="Forward";
refer=src.getClientRects()[0].left;
}

//操作の判断：１．移動%26#12539;２．縮小／拡大
if(event.shiftLeft)
{
ope="Move";
refer=event.clientX-src.getClientRects()[0].left;
}
else
{
ope="Scale";
}
}
else
{
if(ope=="Scale")
{
varsleft=Math.ceil((src.getClientRects()[0].left-left)/unit-1)*unit+left;
varheader=src.getClientRects()[0].left-src.getClientRects()[0].left;
vartail=src.width-header-Math.ceil((src.width-header)/unit)*unit;
varswidth=Math.ceil((src.width-header)/unit)*unit;
if(header%26gt;0)
{
swidth=swidth+unit;
}
if(tail%26gt;0)
{
swidth=swidth+unit;
}
src.style.left=sleft;
src.width=swidth;
}

if(ope=="Move")
{
src.style.left=Math.ceil((src.getClientRects()[0].left-left)/unit-1)*unit+left;
}

drag=false;
OnTrim()
}
}
}
functionOnScale()
{
if(src!=null%26%26drag)
{
if(ope=="Scale")
{
//縮小／拡大の場合
if(dir=="Forward")
{
if(event.clientX-refer%26gt;=unit)
{
src.width=event.clientX-refer;
}
}
else
{
if(refer-event.clientX%26gt;unit)
{
src.style.left=event.clientX;
src.width=refer-src.getClientRects()[0].left;
}
}
}
else
{
//移動の場合http://www.devdao.com/
src.style.left=event.clientX-refer;
}
}

if(event.srcElement!=null)
{
if(event.srcElement.tagName=="IMG")
{
if(event.clientX%26lt;event.srcElement.getClientRects()[0].left+unit/2)
{
event.srcElement.style.cursor="w-resize";
}
else
{
event.srcElement.style.cursor="e-resize";
}
}
}
}
functionOnTrim()
{
varpre,post;
for(index=0;index%26lt;itemNum-1;index++)
{
pre=document.getElementById(aryItems[index]);
post=document.getElementById(aryItems[index+1]);
if(pre.getClientRects()[0].left+pre.width!=post.getClientRects()[0].left)
{
post.style.left=pre.getClientRects()[0].left+pre.width-2;
}
}

for(index=0;index%26lt;itemNum;index++)
{
pre=document.getElementById(aryItems[index]);
if(pre.getClientRects()[0].left%26gt;=left+unit*max)
{
pre.style.left=left+unit*max-2;
pre.width=unit;
}

if((pre.getClientRects()[0].left%26lt;left+unit*max)%26%26(pre.getClientRects()[0].left+pre.width%26gt;left+unit*max))
{
pre.width=left+unit*max-pre.getClientRects()[0].left;
}
}
}
functionOnSubmit()
{
vart="";
for(index=0;index%26lt;itemNum;index++)
{
t=t+((document.getElementById(aryItems[index]).getClientRects()[0].left-left)/unit).toString();
t=t+",";
t=t+(document.getElementById(aryItems[index]).width/unit).toString();
t=t+";";
}
document.getElementById("__Gantt").value=t;
}
document.onmousedown=OnDrag;
document.onmousemove=OnScale;
%26lt;/script%26gt;
当有一个Button做表单提交的时候，会先执行OnSubmit代码段。而在服务器端的操作就是把从客户端发送过来的东西原封不动地发挥去，其中可以加入对数据的修改过程，也可以是通过一进入页面就倒入数据而达到生成画面的目的。
ProtectedSubButton1_Click()SubButton1_Click(ByValsenderAsObject,ByValeAsSystem.EventArgs)HandlesButton1.Click
Response.Write(Request.Params.Item("__Gantt")%26"%26lt;BR%26gt;")
DimstrGanttAsString=Request.Params.Item("__Gantt")
ClientScript.RegisterHiddenField("__Gantt",strGantt)

EndSub
ProtectedSubPage_Load()SubPage_Load(ByValsenderAsObject,ByValeAsSystem.EventArgs)HandlesMe.Load
IfNotIsPostBackThen
ClientScript.RegisterHiddenField("__Gantt",String.Empty)
EndIf
EndSub希望对大家有用。