網頁拖動
有的时候我们想把网页动起来，我们希望页面上的某些元素可以移动，称之为拖拽。[/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>
