Fragmento de código utilizado para implementar el movimiento y arrastre de imágenes en páginas web

以下这段JS是主要解决在画面生成Image项目，并通过鼠标事件进行脱拽、移动等操作的代码.
<script idioma="javascript" tipo="texto/javascript">
var arriba, izquierda;
var src, arrastrar, dir, ope, referir, medio ancho;
unidad var=30;

var aryItems,itemNum=10,index,isInit,id,max=23;

función cargar página()
{
document.form1.onsubmit=AlEnviar;

aryItems=new Array(itemNum);
top=document.getElementById("TABLE").getClientRects()[0].top;
left=document.getElementById("TABLE").getClientRects()[0].left;

if(document.getElementById("__Gantt").value!=null&&document.getElementById("__Gantt").value!="")
{
var gantt=document.getElementById("__Gantt").value;
var array=gantt.split(";");
var longitud=matriz.longitud-1;
var inicio, ancho, elemento;

para(índice=0;índice<longitud;índice++)
{
elemento=matriz[índice].split(",");
inicio=elemento[0];
ancho=elemento[1];

id="Artículo"+índice;
aryItems[índice]=id;

var pista = document.createElement("IMG");
track.setAttribute("id",id);
track.setAttribute("src","blue.gif");

document.body.appendChild(pista);
document.getElementById(id).style.position="absoluto";
document.getElementById(id).style.top=top+unit*index;
document.getElementById(id).style.left=izquierda+unidad*inicio;
document.getElementById(id).width=unidad*ancho;
document.getElementById(id).style.zIndex=9;
}
}
demás
{
para(índice=0;índice<itemNum;índice++)
{
id="Artículo"+índice;
aryItems[índice]=id;

var pista = document.createElement("IMG");
track.setAttribute("id",id);
track.setAttribute("src","blue.gif");

document.body.appendChild(pista);
document.getElementById(id).style.position="absoluto";
document.getElementById(id).style.top=top+unit*index;
document.getElementById(id).style.left=left+unit*index;
document.getElementById(id).width=unidad;
document.getElementById(id).style.zIndex=9;
}
}
arrastrar=falso;
left=document.getElementById(aryItems[0]).getClientRects()[0].left;
}

función OnDrag()
{
if(event.srcElement.tagName!="IMG"&&!arrastrar)
{
si(event.srcElement.id=="btnTrim")
{
// OnTrim();
}
}
demás
{
si(!arrastrar)
{
src=evento.srcElement;
halfwidth=src.width/2;
arrastrar=verdadero;

// 方向の判断
if(event.clientX<src.getClientRects()[0].izquierda+ancho medio)
{
dir="Hacia atrás";
refer=src.getClientRects()[0].left+src.width;
}
demás
{
dir="Adelante";
refer=src.getClientRects()[0].izquierda;
}

// 操作の判断：１．移動・２．縮小／拡大
si (evento.shiftIzquierda)
{
ope="Mover";
refer=event.clientX-src.getClientRects()[0].left;
}
demás
{
ope="Escala";
}
}
demás
{
si(ope=="Escala")
{
var sleft=Math.ceil((src.getClientRects()[0].left-left)/unit-1)*unit+left;
var header=src.getClientRects()[0].left-src.getClientRects()[0].left;
var tail=src.width-header-Math.ceil((src.width-header)/unit)*unit;
var swidth=Math.ceil((src.width-header)/unit)*unit;
si(encabezado>0)
{
ancho=ancho+unidad;
}
si(cola>0)
{
ancho=ancho+unidad;
}
src.style.left=izquierda;
src.width=ancho;
}

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

arrastrar=falso;
Al recortar()
}
}
}

función en escala()
{
si(fuente!=nulo&&arrastrar)
{
si(ope=="Escala")
{
// 縮小／拡大の場合
if(dir=="Adelante")
{
if(event.clientX-refer>=unidad)
{
src.width=event.clientX-refer;
}
}
demás
{
if(refer-event.clientX>unidad)
{
src.style.left=event.clientX;
src.width=refer-src.getClientRects()[0].left;
}
}
}
demás
{
// 移動の場合http://www.devdao.com/
src.style.left=event.clientX-refer;
}
}

si (evento.srcElement! = nulo)
{
if(event.srcElement.tagName=="IMG")
{
if(event.clientX<event.srcElement.getClientRects()[0].izquierda+unidad/2)
{
event.srcElement.style.cursor="w-resize";
}
demás
{
event.srcElement.style.cursor="e-resize";
}
}
}
}

función OnTrim()
{
var pre,post;
para(índice=0;índice<itemNum-1;índice++)
{
pre=document.getElementById(aryItems[índice]);
post=document.getElementById(aryItems[index+1]);
if(pre.getClientRects()[0].izquierda+pre.width!=post.getClientRects()[0].izquierda)
{
post.style.left=pre.getClientRects()[0].left+pre.width-2;
}
}

para(índice=0;índice<itemNum;índice++)
{
pre=document.getElementById(aryItems[índice]);
if(pre.getClientRects()[0].izquierda>=izquierda+unidad*max)
{
pre.style.left=izquierda+unidad*max-2;
pre.ancho=unidad;
}

if((pre.getClientRects()[0].left<izquierda+unidad*max)&&(pre.getClientRects()[0].izquierda+pre.width>izquierda+unidad*max))
{
pre.width=izquierda+unidad*max-pre.getClientRects()[0].left;
}
}
}

función Al enviar()
{
vart="";
para(índice=0;índice<itemNum;índice++)
{
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=En escala;
</script>
Botón de envío: botón de envío来的东西原封不动地发挥去,其中可以加入对数据的修改过程,也可以是通过一进入页面就倒入数据而达到生成画面的目的.
Subbotón protegido1_Click()SubBotón1_Click(ByVal remitente como objeto, ByVal y como System.EventArgs) Maneja el botón1.Click
Respuesta.Escribir(Request.Params.Item("__Gantt") y "<BR>")
Dim strGantt As String = Request.Params.Item("__Gantt")
ClientScript.RegisterHiddenField("__Gantt", strGantt)

Fin Sub

protegido Sub Page_Load()Sub Page_Load(ByVal remitente como objeto, ByVal y como System.EventArgs) Me maneja.Load
Si no es, publicar en aquel entonces
ClientScript.RegisterHiddenField("__Gantt", String.Empty)
Terminar si
Fin Sub希望对大家有用。