标签：style blog http io color ar os java sp
javascript实现图片拖动效果并不难，主要的思路如下
1：给图片绑定监听鼠标按下对象，设置拖动属性为true
2：鼠标抬起：拖动属性为false
鼠标移动：改变坐标即可，新坐标=图片原始坐标+鼠标移动后坐标-鼠标移动前坐标
注意事项
要给图片的位置属性设为fixed或者absolute，并且要图片复制初始的left和top属性
代码如下
<!DOCTYPE html> <html> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <title>test dragging picture</title> <script type="text/javascript" charset="utf-8"> function draggingP (e) { //确认事件 var e = e || window.event; //确认源事件 var myElement = e.srcElement || e.target; //不要默认事件 if(e.preventDefault) e.preventDefault(); else e.returnvalue = false; var mypic = document.getElementById("mypic"); mypic[‘dragging‘]=true;//拖动属性为true var lef =parseInt(myElement.style.left); var to = parseInt(myElement.style.top); // alert(lef+"+"+to); myElement.onmouseup = function () { mypic[‘dragging‘]=false;//拖动属性为false } document.onmousemove = function (eMove) { var eMove = eMove || window.event; if(mypic[‘dragging‘]==true){//新坐标 myElement.style.left = eMove.clientX -e.clientX + lef+"px"; myElement.style.top = eMove.clientY -e.clientY + to+"px"; return false; } } } window.onload = function () { var mypic = document.getElementById("mypic"); mypic[‘dragging‘]=false; if(navigator.userAgent.indexOf(‘MSIE‘)>0){//IE mypic.attachEvent("onmousedown",draggingP); }//绑定监听事件 else{ mypic.addEventListener("mousedown",draggingP,false); } } </script> </head> <body> <img src="http://www.sysu.edu.cn/favicon.ico" alt="sysu" name="mypic" id="mypic" style="position:absolute"> </body> </html>
标签：style blog http io color ar os java sp
原文地址：http://www.cnblogs.com/qwj-sysu/p/4079226.html
