Cuplikan kode yang digunakan untuk mengimplementasikan pemindahan dan menyeret gambar pada halaman Web

以下这段JS是主要解决在画面生成Image项目,并通过鼠标事件进行脱拽、移动等操作的代码。
<skrip bahasa="javascript" type="teks/javascript">
var atas, kiri;
var src,seret,dir,buka,rujuk,setengah lebar;
var satuan=30;

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

fungsi Muat Laman()
{
document.form1.onsubmit=OnSubmit;

aryItems=Array baru(itemNum);
top=document.getElementById("TABEL").getClientRects()[0].top;
kiri=document.getElementById("TABEL").getClientRects()[0].kiri;

if(document.getElementById("__Gantt").value!=null&&document.getElementById("__Gantt").value!="")
{
var gantt=document.getElementById("__Gantt").value;
var array=gantt.split(";");
var panjang=array.panjang-1;
var mulai,lebar,item;

untuk(indeks=0;indeks<panjang;indeks++)
{
item=array[indeks].split(",");
mulai=barang[0];
lebar=barang[1];

id="Barang"+indeks;
aryItems[indeks]=id;

var track = dokumen.createElement("IMG");
track.setAttribute("id",id);
track.setAttribute("src","biru.gif");

dokumen.body.appendChild(track);
document.getElementById(id).style.position="absolute";
document.getElementById(id).style.top=top+unit*index;
document.getElementById(id).style.left=kiri+unit*mulai;
dokumen.getElementById(id).width=unit*width;
dokumen.getElementById(id).style.zIndex=9;
}
}
kalau tidak
{
untuk(indeks=0;indeks<itemNum;index++)
{
id="Barang"+indeks;
aryItems[indeks]=id;

var track = dokumen.createElement("IMG");
track.setAttribute("id",id);
track.setAttribute("src","biru.gif");

dokumen.body.appendChild(track);
document.getElementById(id).style.position="absolute";
document.getElementById(id).style.top=top+unit*index;
document.getElementById(id).style.left=kiri+unit*indeks;
dokumen.getElementById(id).width=unit;
dokumen.getElementById(id).style.zIndex=9;
}
}
seret=salah;
kiri=document.getElementById(aryItems[0]).getClientRects()[0].kiri;
}

fungsi OnDrag()
{
if(event.srcElement.tagName!="IMG"&&!drag)
{
if(event.srcElement.id=="btnTrim")
{
// DiTrim();
}
}
kalau tidak
{
jika(!seret)
{
src=acara.srcElement;
setengah lebar=src.lebar/2;
seret=benar;

// 方向の判断
if(event.clientX<src.getClientRects()[0].kiri+setengah lebar)
{
dir="Mundur";
referensi=src.getClientRects()[0].kiri+src.lebar;
}
kalau tidak
{
dir="Maju";
referensi=src.getClientRects()[0].kiri;
}

// 操作の判断：１．移動・２．縮小／拡大
if(acara.shiftKiri)
{
ope="Pindah";
referensi=event.clientX-src.getClientRects()[0].kiri;
}
kalau tidak
{
ope="Skala";
}
}
kalau tidak
{
if(ope=="Skala")
{
var sleft=Math.ceil((src.getClientRects()[0].kiri-kiri)/unit-1)*unit+kiri;
var header=src.getClientRects()[0].left-src.getClientRects()[0].kiri;
var tail=src.width-header-Math.ceil((src.width-header)/unit)*unit;
var swidth=Math.ceil((src.width-header)/unit)*unit;
jika(tajuk>0)
{
lebar=lebar+satuan;
}
jika(ekor>0)
{
lebar=lebar+satuan;
}
src.style.left=skiri;
src.lebar=lebar;
}

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

seret=salah;
DiTrim()
}
}
}

fungsi Pada Skala()
{
if(src!=batal&&seret)
{
if(ope=="Skala")
{
// 縮小／拡大の場合
if(dir=="Maju")
{
if(event.clientX-refer>=unit)
{
src.width=event.clientX-refer;
}
}
kalau tidak
{
if(refer-event.clientX>unit)
{
src.style.left=acara.klienX;
src.width=refer-src.getClientRects()[0].kiri;
}
}
}
kalau tidak
{
// 移動の場合http://www.devdao.com/
src.style.left=event.clientX-refer;
}
}

if(acara.srcElement!=null)
{
if(event.srcElement.tagName=="IMG")
{
if(event.clientX<event.srcElement.getClientRects()[0].kiri+unit/2)
{
event.srcElement.style.cursor="w-resize";
}
kalau tidak
{
event.srcElement.style.cursor="e-resize";
}
}
}
}

fungsi OnTrim()
{
var pra,posting;
untuk(indeks=0;indeks<itemNum-1;indeks++)
{
pra=document.getElementById(aryItems[index]);
post=document.getElementById(aryItems[index+1]);
if(pre.getClientRects()[0].left+pre.width!=post.getClientRects()[0].kiri)
{
post.style.left=pre.getClientRects()[0].left+pre.width-2;
}
}

untuk(indeks=0;indeks<itemNum;index++)
{
pra=document.getElementById(aryItems[index]);
if(pre.getClientRects()[0].kiri>=kiri+unit*maks)
{
pra.gaya.kiri=kiri+unit*maks-2;
pra.lebar=satuan;
}

if((pre.getClientRects()[0].kiri<kiri+unit*maks)&&(pre.getClientRects()[0].kiri+pre.lebar>kiri+unit*maks))
{
pre.width=kiri+unit*max-pre.getClientRects()[0].kiri;
}
}
}

fungsi OnSubmit()
{
var t="";
untuk(indeks=0;indeks<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+";";
}
dokumen.getElementById("__Gantt").value=t;
}

document.onmousedown=OnDrag;
document.onmousemove=Berskala;
</skrip>
Tombol untuk mengatur Tombol, OnSubmit, dan OnSubmit untuk melakukan hal yang sama. perusahaan asuransi kesehatan, perusahaan asuransi kesehatan, perusahaan asuransi kesehatan, perusahaan asuransi kesehatan通过一进入页面就倒入数据而达到生成画面的目的。
Sub Button1_Click()Sub Button1_Click(Pengirim ByVal Sebagai Objek, ByVal dan Sebagai System.EventArgs) Menangani Button1.Click
Respons.Tulis(Permintaan.Params.Item("__Gantt") & "<BR>")
Redupkan strGantt As String = Permintaan.Params.Item("__Gantt")
ClientScript.RegisterHiddenField("__Gantt", strGantt)

Sub Akhir

Dilindungi Sub Page_Load()Sub Page_Load(ByVal pengirim Sebagai Objek, ByVal dan Sebagai System.EventArgs) Menangani Me.Load
Jika Bukan IsPostBack Lalu
ClientScript.RegisterHiddenField("__Gantt", String.Kosong)
Akhiri Jika
Sub Akhir希望对大家有用。