浏览器界面鼠标拖动图片

<!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>
浏览器界面鼠标拖动图片

猜你喜欢
