当前位置:K88软件开发文章中心编程语言JavaScriptJS01 → 文章内容

实现网页上的图片任意拖动

减小字体 增大字体 作者:佚名     来源:asp编程网  发布时间:2018-12-30 8:56:43

<
style>

<
!--
.drag
{position:relative
cursor:hand}
-->

<
/style>

<
script 
language="
JavaScript1.2"
>

<
!--

var 
dragapproved=false
var 
z,x,y
function 
move()
{
if 
(event.button==1&

#38
&

#38
dragapproved)
{
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return 
false
}
}
function 
drags()
{
if 
(!document.all)
return
if 
(event.srcElement.className=="
drag"
)
{
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags
document.onmouseup=new 
Function("
dragapproved=false"
)
//-->

<
/script>


<
img 
src=0001.jpg 
width=80 
height=80 
class="
drag"
>
<
br>
<
br>

<
img 
src=0002.jpg 
width=80 
height=80 
class="
drag"
>
<
br>
<
br>

<
img 
src=0003.jpg 
width=80 
height=80 
class="
drag"
>
<
br>
<
br>

<
img 
src=0004.jpg 
width=80 
height=80 
class="
drag"
>



实现网页上的图片任意拖动