如何实现网页上拖动图片

最新推荐文章于 2024-10-04 15:04:59 发布

原创最新推荐文章于 2024-10-04 15:04:59 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #javascript #class #html #file

ASP.NET 专栏收录该内容

4 篇文章

订阅专栏

该博客展示了利用HTML和JavaScript实现图片拖动效果的代码。通过定义样式类和编写JavaScript函数，处理鼠标事件，实现了图片在页面上的拖动功能，涉及HTML的标签使用和JavaScript的事件处理。

<HTML>
<HEAD>
<style>
.drag{position:relative;cursor:hand}
</style>
<script language="JavaScript">
var dragapproved=false
var eventsource,x,y
function move()
{
if (event.button==1&&dragapproved)
   {
    eventsource.style.pixelLeft=temp1+event.clientX-x
    eventsource.style.pixelTop=temp2+event.clientY-y
    return false
   }
}
function drags()
{
if (!document.all)
return
if (event.srcElement.className=="drag")
   {
    dragapproved=true
    eventsource=event.srcElement
    temp1=eventsource.style.pixelLeft
    temp2=eventsource.style.pixelTop
    x=event.clientX
    y=event.clientY
    document.onmousemove=move
   }
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
</script>
</HEAD>
<BODY>