javascript 实现图片拖动

骑猪看日落 2023-06-04 04:59 30阅读 0赞

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>

转载于:https://www.cnblogs.com/qwj-sysu/p/4079226.html