當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

網頁拖動

發布時間：2025/7/25 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了網頁拖動小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

有的時候我們想把網頁動起來，我們希望頁面上的某些元素可以移動，稱之為拖拽。[/color]
原創
HTML code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Drag.aspx.cs" Inherits="Test.Drag" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <script type="text/javascript" language="javascript"> //為Number增加一個屬性,判斷當前數據類型是否是數字 Number.prototype.NaN0=function(){return isNaN(this)?0:this;} //全局變量 var iMouseDown=false; var dragObject=null; //獲得鼠標的偏移量(對象2-對象1) function getMouseOffset(target,ev) { ev=ev||window.event; var docPos=getPosition(target); var mousePos=mouseCoords(ev); return {x:mousePos.x-docPos.x,y:mousePos.y-docPos.y}; } //獲得事件發生的實際位置----------------------對象1 function getPosition(e) { var left=0; var top=0; //相對位置累加得到實際位置 while(e.offsetParent) { left+=e.offsetLeft+(e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); top+=e.offsetTop+(e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0); e=e.offsetParent; } left+=e.offsetLeft+(e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); top+=e.offsetTop+(e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0); return {x:left,y:top}; } //獲得發生事件鼠標的位置----------------------對象2 function mouseCoords(ev) { if(ev.pageX||ev.pageY) { return {x:ev.pageX,y:ev.pageY}; } return {x:ev.clientX+document.body.scrollLeft-document.body.clientLeft,y:ev.clientY+document.body.scrollTop-document.body.clientTop}; } //定義可以拖拽的對象 function makeDragable(item) { if(!item) return; //為可拖拽對象定義一個onmousedown事件的方法 ev=window.event; item.onmousedown=function(ev) { dragObject=this; mouseOffset=getMouseOffset(this,ev); return false; } } //定義鼠標點下所調用的方法 function mouseDown(ev) { ev=ev||window.event; var target=ev.target||ev.srcElement; if(target.onmousedown||target.getAttribute('DragObj')) { return false; } } //鼠標抬起后釋放對象 function mouseUp(ev) { dragObject = null; //onmouseup事件觸發時說明鼠標已經松開，所以設置down變量值為false iMouseDown = false; } //鼠標移動 function mouseMove(ev) { ev=ev||window.event; var target = ev.target || ev.srcElement; var mousePos = mouseCoords(ev); if(dragObject) { if(dragObject.style) { //移動對象 dragObject.style.left=mousePos.x - mouseOffset.x; dragObject.style.top= mousePos.y - mouseOffset.y; } } //lMouseState = iMouseDown; if(dragObject) return false; } document.onmousedown=mouseDown; document.onmousemove=mouseMove; document.onmouseup=mouseUp; function moveImg() { var img1=document.getElementById('img1'); makeDragable(img1); } </script> </head> <body onload="moveImg()"> <form id="form1" runat="server"> <div> <img src="a.jpg" alt="" id="img1" style="position:absolute;left:0px;top:0px;" /> </div> </form> </body> </html>

轉載于:https://www.cnblogs.com/Nina-piaoye/archive/2007/11/13/958287.html

總結

以上是生活随笔為你收集整理的網頁拖動的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

網頁拖動