網頁拖動
有的時候我們想把網頁動起來，我們希望頁面上的某些元素可以移動，稱之為拖拽。[/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>
原創
HTML code
轉載于:https://www.cnblogs.com/Nina-piaoye/archive/2007/11/13/958287.html
總結
- 上一篇： 优化我们的业务之序
- 下一篇： onmousewheel