JavaScript鼠标拖动图片

深藏阁楼爱情的钟 2022-05-16 00:12 381阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    <style type='text/css'>
    img { position: absolute; }
    </style>
    
    <body>
    <script type='text/javascript'>
       function moveImage() {
            let moveId = document.getElementById("move");
            moveId.style.top = "200px";
            moveId.style.left = "200px";
            moveId.style.position = "absolute";
    
            document.onmousedown = coordinates;
            document.onmouseup = mouseup;
    
            let leftp = undefined;
            let topp = undefined;
            let xcoor = undefined;
            let ycoor = undefined;
    
            function coordinates(e) {
                if (e === null) { e = window.event;}
                let sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;
    
                if (sender.id === "move") {
                    mouseover = true;
                    leftp = parseInt(moveId.style.left);
                    topp = parseInt(moveId.style.top);
                    xcoor = e.clientX;
                    ycoor = e.clientY;
                    document.onmousemove = moveImg;
                    return false;
                }  else {
                    return false;
                }
            }
    
            function moveImg(e) {
                if (e === null) {e = window.event;}
                moveId.style.left = leftp + e.clientX - xcoor + "px";
                moveId.style.top = topp + e.clientY - ycoor + "px";
                return false;
            }
    
            function mouseup(e) {
                document.onmousemove = null;
            }
    
        };
    	
      window.onload = moveImage;
    </script>
      <img id="move" src="123.jpg" width="200" height="200"/>
      <p>用鼠标点击并拖动图片</p>
    </body>
    
    </html>