网页内图片移动代码:用来实现Web页面图片移动托拽的代码段 以下这段JS是主要解决在画面生成Image项目,并通过鼠标事件进行脱拽、移动等操作的代码。 mc9$"
<script language="javascript" type="text/javascript"> P=u )Q _
var top,left; =PO/Q|-v?
var src,drag,dir,ope,refer,halfwidth; XUMCz7&j
var unit=30; _#N~$
j}h50*6KO
var aryItems,itemNum=10,index,isInit,id,max=23; TXrC5AJx
}m0Lr:vq<r
function PageLoad() %\5y6
{ &,KxtlR![
document.form1.onsubmit=OnSubmit; *NXwllrci
O`@$YXuD
aryItems=new Array(itemNum); 6] <?+#uQ
top=document.getElementById("TABLE").getClientRects()[0].top; );,#H`'
left=document.getElementById("TABLE").getClientRects()[0].left; 0udE\/4!^
KTf!Pf?g
if(document.getElementById("__Gantt").value!=null&&document.getElementById("__Gantt").value!="") +<3tv&"
{ +}^}
<|W6
var gantt=document.getElementById("__Gantt").value; *b7v)d#
var array=gantt.split(";"); xQmk2S`
y
var length=array.length-1; kB~: HQf
var start,width,item; <'gCI Ia2
>\>HRyt%
for(index=0;index<length;index++) 8, WQ}cC
{ 31bKgU{
item=array[index].split(","); ls/:/x(5d
start=item[0]; jo"[$%0`
width=item[1]; m=opY~&h
n#x{~oQc
id="Item"+index; sG^b_3o)A
aryItems[index]=id; IO fo]p-
;((gmg7,
var track = document.createElement("IMG"); D* Vr)J
track.setAttribute("id",id); Q&n|tQ*4
track.setAttribute("src","blue.gif"); bC)<AG@Z\
;r`[6[AG
document.body.appendChild(track); s7&%_!4
document.getElementById(id).style.position="absolute"; m6g+ B >
document.getElementById(id).style.top=top+unit*index; 8xL-j2w
document.getElementById(id).style.left=left+unit*start; t}TtWI
document.getElementById(id).width=unit*width; MR8-xO'w
document.getElementById(id).style.zIndex=9; @tp/0E?
} ~r|.GY
} in B}ydk
else IK}T.*[
{ V+D "_
for(index=0;index<itemNum;index++) {4:En;
{ f+/^1~^
id="Item"+index; _NZ)
n)
aryItems[index]=id; crvWAsm
dQizM^j
var track = document.createElement("IMG"); h`n>6I
track.setAttribute("id",id); 0@xuxm/i
track.setAttribute("src","blue.gif"); sRoZvp5
,e>ugI_;*
document.body.appendChild(track); Q"Bgr&RJ
document.getElementById(id).style.position="absolute"; t zV"|s=o
document.getElementById(id).style.top=top+unit*index; Z:n33xh=<
document.getElementById(id).style.left=left+unit*index; x3WY26e
document.getElementById(id).width=unit;
,p 'M@[
document.getElementById(id).style.zIndex=9; Xt~/8)&
} q?t>!1c
} 0\gE^=o[
drag=false; 1yKf=LZ^
left=document.getElementById(aryItems[0]).getClientRects()[0].left; wYF)G;[wM
} %R_8`4IQ
"iKK&%W
function OnDrag() Vj:PNt[
{ [Q%3=pm_
if(event.srcElement.tagName!="IMG"&&!drag) b0&dpMgh:
{ M1oCa,8M+
if(event.srcElement.id=="btnTrim") Cvl"")ZZ`
{ Y${ $7+@
// OnTrim(); +V0uHpm
} 0_j! t
}
k&rl%P
else (yZ^Y'0
{ L1 J"_.=P
if(!drag) J M`uIVnNA
{ [g%oo3`A
src=event.srcElement; KBOxr5w
halfwidth=src.width/2; 0t<TZa]V
drag=true; 7?F0~[eGG
5Rc
5/ m
// 方向の判断 j'v2m 6/
if(event.clientX<src.getClientRects()[0].left+halfwidth) )|*HkdF`
{ )=2iGEVW
dir="Backward"; :Oy9`vv
refer=src.getClientRects()[0].left+src.width; bluhiiATd
} \_0nH`
else D1#fy=u69|
{ v2/@Pu!kg
dir="Forward"; 3~%9;.I3!
refer=src.getClientRects()[0].left; #]cO]
I
} `[X5mEe
1 cvoI
// 操作の判断:1.移動・2.縮小/拡大 1-.6psE
if(event.shiftLeft) . =yF
{ o'+p,_y9Y@
ope="Move"; +"
|?P
refer=event.clientX-src.getClientRects()[0].left; +-"uJIwMD
} zZR_&z<
else vLCyT=OB`
{ %'+}-w
ope="Scale"; ZP-^10
} kZ5;Fe\*
} D`c&Q4$:
else )>"|<h.2]
{ s$g3__|Y
if(ope=="Scale") Dbl3ef
{ 3QhQpPk),
var sleft=Math.ceil((src.getClientRects()[0].left-left)/unit-1)*unit+left; S\M+*:7
var header=src.getClientRects()[0].left-src.getClientRects()[0].left; YQ|o0>
var tail=src.width-header-Math.ceil((src.width-header)/unit)*unit; ZHM NG~!
var swidth=Math.ceil((src.width-header)/unit)*unit; .k -!/ ^
if(header>0) j4wsDtmAU
{ IOddu2.(
swidth=swidth+unit; cO8yu`4!e
} ,7Dm p7
if(tail>0) ;TKsAU
{ $\#wsI(
swidth=swidth+unit; ]u.)6{
} *QT7\ht3
src.style.left=sleft; !KtP> `8
src.width=swidth; "td ,YVK
} [33=+Ca
*iUR1V Y
if(ope=="Move") "d*-k R
{ {tuGkRY2~
src.style.left=Math.ceil((src.getClientRects()[0].left-left)/unit-1)*unit+left; ~Efi|A/
} SpMHq_MLM
^=
'+#|:
drag=false; v"sN
K
OnTrim() r#c+{yY
} 5r^u7k
} GC@U['
} `o%Ua0x2
(o8?j^ -v
function OnScale() @|}=W Q
{ lsOZ%p%fV
if(src!=null&&drag) AAK}t6
{ $,jynRk7q
if(ope=="Scale") /pz(s+4=
{ BoXGoFn
// 縮小/拡大の場合 ,IG?(CK|
if(dir=="Forward") XLFo"f
{ #VM-\02o
if(event.clientX-refer>=unit) \Zo
xJ&
{ f"A?\w @
src.width=event.clientX-refer; & ^JY
} +X7+:QQ}
} %/=#8v4*
else ;PhX[y^*
{ `K\(I#z
if(refer-event.clientX>unit) oj~0zJI
{ [)83X\CO
src.style.left=event.clientX; I4^}C;p0?
src.width=refer-src.getClientRects()[0].left; Kly`V]XE
} W]DZ'
} 5x; y{qT
} edD"jq)J
else ^gD%#3>X
{ wH Q$F(by
// 移動の場合 -wjvD8fL
src.style.left=event.clientX-refer; |KxFiH
} ?[G!6
} #7~M1/eH=t
`+/xA\X]
if(event.srcElement!=null) ) b
vZ~t+^
{ #}rv)
if(event.srcElement.tagName=="IMG") U,4:yc,)s
{ EK6fd#J?1
if(event.clientX<event.srcElement.getClientRects()[0].left+unit/2) $6XCHVx
{ '<C I^5^
event.srcElement.style.cursor="w-resize"; '_~=C-g
} 9
1r"-%(r
else iraO/KhD*3
{ FSqS]6b3
event.srcElement.style.cursor="e-resize"; 0~\Dd0W/:`
} + (cTzY
} s|U?{Byb!
} VR>;{>~
} pNo<:p
s fxQ
function OnTrim() >Rw[ x
{ &P%3'c}G
var pre,post; 9&=~_,wJd
for(index=0;index<itemNum-1;index++) iNR6BP
W
{ N9D<wAK##)
pre=document.getElementById(aryItems[index]); *f:^6h
post=document.getElementById(aryItems[index+1]); m9UI3fBX
if(pre.getClientRects()[0].left+pre.width!=post.getClientRects()[0].left) 0+0+%#?
{ q"5iza__H
post.style.left=pre.getClientRects()[0].left+pre.width-2; pq6}q($Rk
} Z;bzp3v
} 3~\mP\/4v
@<e+E"6
for(index=0;index<itemNum;index++) Z&%#,0>]
{ K*Zf^g
m
pre=document.getElementById(aryItems[index]); 2H_|Attoi
if(pre.getClientRects()[0].left>=left+unit*max) [rv"tz=
{ {[PoLOCI
pre.style.left=left+unit*max-2; h8oG5|Y
pre.width=unit; 5YaTE<G
} A^2VH$j]+
0b9K/a%sQv
if((pre.getClientRects()[0].left<left+unit*max)&&(pre.getClientRects()[0].left+pre.width>left+unit*max)) j`A%(()d
{ W XDl\*n
pre.width=left+unit*max-pre.getClientRects()[0].left; 1q<BYc+z
} Mo|[Muj8b
} Od70w*,
}
,F(nkbt
6Yebc_, R
function OnSubmit() _Iy0-=G
{ Juj"cjob
var t=""; PI(;t9]b
for(index=0;index<itemNum;index++) Enn7p9&
{ cq+|fg~Yy
t=t+((document.getElementById(aryItems[index]).getClientRects()[0].left-left)/unit).toString(); k'{'6JR
t=t+","; DcA{E8Y
t=t+(document.getElementById(aryItems[index]).width/unit).toString(); ya3A^&:
t=t+";"; B)g7MG
} DZ -5A
document.getElementById("__Gantt").value=t; J3gJSRT@P
} 4;'o`K~*
iTF`sjL
document.onmousedown=OnDrag; hdt;_qa
document.onmousemove=OnScale; A@xa$!4}
</script>