首页 > 代码库 > javascript 实现图片拖动
javascript 实现图片拖动
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>
javascript 实现图片拖动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。