网页内图片移动代码:用来实现Web页面图片移动托拽的代码段 以下这段JS是主要解决在画面生成Image项目,并通过鼠标事件进行脱拽、移动等操作的代码。 }wWKFX
<script language="javascript" type="text/javascript"> b}OY4~ Y4
var top,left; Y_Eb'*PY
var src,drag,dir,ope,refer,halfwidth; xqXo0
var unit=30; $[9%QQk5<L
E_gD:PPU5
var aryItems,itemNum=10,index,isInit,id,max=23; ];} Wfl
g-qP;vy@"q
function PageLoad() ^le<}
{
*aX F5S
document.form1.onsubmit=OnSubmit; rjl`&POqc
r~[Ia!U ?
aryItems=new Array(itemNum); uzXCIv@
top=document.getElementById("TABLE").getClientRects()[0].top; |o,YCzy|5
left=document.getElementById("TABLE").getClientRects()[0].left; -)s qc
P
Us%T;gW
if(document.getElementById("__Gantt").value!=null&&document.getElementById("__Gantt").value!="") k2E0/ @f{k
{ t4{rb,
}W
var gantt=document.getElementById("__Gantt").value; `id9j
var array=gantt.split(";"); >AC]#'
var length=array.length-1; H/,gro
var start,width,item; r[1i*b$
!P ~_Dl2d
for(index=0;index<length;index++) I6~pV@h^=
{ aF8fqu\
item=array[index].split(","); z
MLK7+
start=item[0]; KN$}tCU
width=item[1]; ktI/3Mb@
X7[^s
$VK
id="Item"+index; 5>VY LI
aryItems[index]=id; ()tp>
R,)}>X|<
var track = document.createElement("IMG"); Nb?w|Ne(T
track.setAttribute("id",id); Q=BZ N]g2
track.setAttribute("src","blue.gif"); U ?'vXa
~jK{ ,$:=
document.body.appendChild(track); w0|gG+x jS
document.getElementById(id).style.position="absolute"; 3:5 &Aa!
document.getElementById(id).style.top=top+unit*index; 9V,!R{kO!
document.getElementById(id).style.left=left+unit*start; R E}?5XHb
document.getElementById(id).width=unit*width; '#LQN<"4
document.getElementById(id).style.zIndex=9; :1 (p.q=
} ;GVV~.7/
} wtmB+:I
else V~S0hqW[
{ p`nPhk,:b
for(index=0;index<itemNum;index++) Qd=^S^}(
{ 0ge$ p,
id="Item"+index; 6&DX] [G
aryItems[index]=id; {n/uh0>f*
v$(lZa1
var track = document.createElement("IMG"); uum;q-"
track.setAttribute("id",id); GM<BO8Y.
track.setAttribute("src","blue.gif"); ixW@7m
%7#-%{
document.body.appendChild(track); {~h*2n
document.getElementById(id).style.position="absolute"; YoN*:jB<M
document.getElementById(id).style.top=top+unit*index; U7!.,kR-
document.getElementById(id).style.left=left+unit*index; %{(x3\ *&
document.getElementById(id).width=unit; \Y|~2Ls8tu
document.getElementById(id).style.zIndex=9; .!1S[
} R)F;py8)I
} [,K.*ZQi
drag=false; %1.]c6U
left=document.getElementById(aryItems[0]).getClientRects()[0].left; txZ?=8j_Y
} masT>vM
L7= Q<D<
function OnDrag() Aub]IO~
{ %r-V2)
if(event.srcElement.tagName!="IMG"&&!drag) B|C/
Rk6?
{ Py>{t4;S
if(event.srcElement.id=="btnTrim") 6*qL[m.F[o
{
U3izvM
// OnTrim(); "]m+z)lWd
} P7 ]z
} I.Y['%8,5~
else K]qM~v<A
{ N7b1.]<
if(!drag) hY*0aZ|(
{ osOVg0Gyj
src=event.srcElement; FYb34LY
halfwidth=src.width/2; -w;(cE
drag=true; j7MO'RX`&
]&ixhW
// 方向の判断 O<jPGU
if(event.clientX<src.getClientRects()[0].left+halfwidth) rZojY}dWJ
{ !@I}mQ ~
dir="Backward"; 5tv<8~:K
refer=src.getClientRects()[0].left+src.width; !Y<oN~<%)
} Olfn
else Sf/q2/r?6[
{ 16X@^j_
dir="Forward"; <&pKc6+{
refer=src.getClientRects()[0].left; {ub/3Uh
} '
)-M\'S$E
CKlL~f EL
// 操作の判断:1.移動・2.縮小/拡大 ?$z.K>S5
if(event.shiftLeft) g,]@4|
{ q
(+ZwaV@
ope="Move"; m"-[".-l-
refer=event.clientX-src.getClientRects()[0].left; gV U1Y6.
} ,>LRa
else *Q}[ ]g
{ ;\y;
ope="Scale"; ,xths3.K
} 9.M{M06;
} h4fLl3%H
else V/"}ku
{ 4p) e}W*
if(ope=="Scale") UQd6/mD`e
{ ,
fb(
WY
var sleft=Math.ceil((src.getClientRects()[0].left-left)/unit-1)*unit+left; W7UtA.2LT
var header=src.getClientRects()[0].left-src.getClientRects()[0].left; u/AT-er;
var tail=src.width-header-Math.ceil((src.width-header)/unit)*unit; Fa3gJ[ZAqf
var swidth=Math.ceil((src.width-header)/unit)*unit; j%& IL0
if(header>0) #iis/6"
{ <9@7,2
swidth=swidth+unit; 3;$bS<>
} ]1fZupM^6
if(tail>0) ^Gz{6@TY5
{ z] @W[MHY
swidth=swidth+unit; 85>S"%_
} d><fu]'
src.style.left=sleft; Ao`_",E
src.width=swidth; 6$B'Q30}r
} 3sC:jIp
^!@*P,'I
if(ope=="Move") 7,_-XV2
{ d)*(KhYie@
src.style.left=Math.ceil((src.getClientRects()[0].left-left)/unit-1)*unit+left; u
2lXd'
} w~v<v&
^_w*XV
drag=false; `!kL1oUYE
OnTrim() ~x+Ykq0
} LD@7(?mlU
} /Hk07:"c
} QJ M(UfHUD
W8uVd zQ
function OnScale() {fElto
{ x?>!UqgkY
if(src!=null&&drag) yr{5Rp05=
{ YZ{jP?x
if(ope=="Scale") t!l/` e%J
{ d.b?!kn
// 縮小/拡大の場合
$Gd5wmb!
if(dir=="Forward") aC}vJ93i
{ Yg|l?d"
if(event.clientX-refer>=unit) :MdEr//w
{ ->Q`'@'|P
src.width=event.clientX-refer; g!.Ut:8L9
} 1wU=WE(kKZ
} ^,~N7`
else <XY;fhnB
{ olHH9R9:
if(refer-event.clientX>unit) CF,8f$:2
{ HgS<Vxmq
src.style.left=event.clientX; /kAwe *)
src.width=refer-src.getClientRects()[0].left; ef^Cc)S-Q
} ntDRlX
} [..,(
} :,urb*
else QQ5lW
{ rsd2v9
// 移動の場合 =W;t@"6>2
src.style.left=event.clientX-refer; oqm
} %kFTnXHK
} ./7&_9|<
~uP
r]#
if(event.srcElement!=null) \f8P`oET~
{ []GthF
if(event.srcElement.tagName=="IMG") B"pFJ"XR
{ Qx6,>'Qk'
if(event.clientX<event.srcElement.getClientRects()[0].left+unit/2) m_{%tU;N
{ p?J~'
event.srcElement.style.cursor="w-resize"; _A@fP[C
} hLDch5J5~
else aB$y+`f)@
{ \Owful
event.srcElement.style.cursor="e-resize"; (T>?8K_d
} reqfgNg
} ,ZzB#\
} ~$?y1Yv
} 2$j
Ot}
L5-T6CD
function OnTrim() ei+9G,
{ RpmBP[
var pre,post; A}t&-
for(index=0;index<itemNum-1;index++) W|r+J8
{ i&}zcGC
pre=document.getElementById(aryItems[index]); :XPC0^4s
post=document.getElementById(aryItems[index+1]); (_i
v N
if(pre.getClientRects()[0].left+pre.width!=post.getClientRects()[0].left) 7T|J[WO
{ oqd
N5+xt
post.style.left=pre.getClientRects()[0].left+pre.width-2; HP4'8#3o
} PcNfTB{
} #iRyjD
5E\<r/FeJ
for(index=0;index<itemNum;index++) |=^#d\?]j
{ 4I:JaRT
d
pre=document.getElementById(aryItems[index]); Qa7S'(
if(pre.getClientRects()[0].left>=left+unit*max) ].<sAmL^
{ $!l2=^\3
pre.style.left=left+unit*max-2; k+q6U[ce
pre.width=unit; e??{&[
} ?D~SHcBaN
s68_o[[E
if((pre.getClientRects()[0].left<left+unit*max)&&(pre.getClientRects()[0].left+pre.width>left+unit*max)) @)2V"FE4i
{ dE}b8|</
pre.width=left+unit*max-pre.getClientRects()[0].left; ap'kxOf"1
} Am0.c0h
} J!
6z
} )[M<72
:5cu,&<Gv
function OnSubmit() H+#wj|,+\
{ b%!`fn-;
var t=""; /6+%(f}7l
for(index=0;index<itemNum;index++) h%w\O Z7
{ 7SY->-H8
t=t+((document.getElementById(aryItems[index]).getClientRects()[0].left-left)/unit).toString(); FTYLMQ
i
t=t+","; g/X=#!
t=t+(document.getElementById(aryItems[index]).width/unit).toString(); ~Yz/t
t=t+";"; tEX~72v
} /qq&'}TZP
document.getElementById("__Gantt").value=t; yg[;
} +$=Wms-z
Lr\ B
document.onmousedown=OnDrag; P[P72WR
document.onmousemove=OnScale; UlN|Oy,
</script>