第三十一天用js写一个可以拖动的div

最新推荐文章于 2024-06-24 14:21:19 发布

迷失的夜行者

最新推荐文章于 2024-06-24 14:21:19 发布

阅读量4.9k

点赞数 1

分类专栏： javaScript技术文章标签： js javaweb

本文链接：https://blog.csdn.net/java_wht/article/details/72896132

版权

javaScript技术专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript编写一个可拖动的div。作者感谢了一位同事的帮助，指出解决问题的关键在于正确地绑定事件到JavaScript，这让他认识到实践的重要性以及从简单代码中学习思维逻辑的价值。

摘要由CSDN通过智能技术生成

无论如何，先感谢一下我的同事，而且还是妹子，为了帮我，给我写了一个这个可拖动的div的代码，所有的代码都是用hbuilder工具写的，工具可以自己去百度搜索。

这个是给我基础测试题的哪个实习生教我的，我的思路一直在增加监听事件哪块。但是，别人一说我突然恍然大悟，原来还是可以通过事件绑定到对应的js就可以了,，感觉自己的思路不对，解决问题的思路不对，很多事情要做过之后才能懂，其实很多时候看书就是通过简单的代码了解一个思维逻辑，然后加以引用而已。

<!DOCTYPE html>
<html>  
<head runat="server">  
    <title></title>  
    <style>
    	#mov{
    		background-color: #00DDCC;
    		width: 200px;
    		height: 200px;  
        	top: 100px;
        	left: 100px;  
        	position: absolute;
    	}
    </style>
    <script>  
        var mouseX, mouseY;  
        var objX, objY;  
        var isDowm = false; 
        function mouseDown(obj, e) {  
        	var div = document.getElementById("mov");  
            obj.style.cursor = "move";  
			objX = div.offsetLeft;
			objY = div.offsetTop;
            mouseX = e.clientX;  
            mouseY = e.clientY;  
            isDowm = true;  
        }  
        function mouseMove(e) {  
            var div = document.getElementById("mov");  
            var x = e.clientX;  
            var y = e.clientY;  
            if (isDowm) {  
                div.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px";  
                div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px";  
            }  
        }  
        function mouseUp(e) {  
            if (isDowm) {  
                var x = e.clientX;  
                var y = e.clientY;  
                var div = document.getElementById("mov");  
                div.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px";  
                div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px";  
                div.style.cursor = "default";  
                isDowm = false;  
            }  
        }  
    </script>
</head>  
<body>  
    <div id="mov" οnmοusedοwn="mouseDown(this,event)" οnmοusemοve="mouseMove(event)" οnmοuseup="mouseUp(event)"></div> 
</body>  
</html>

迷失的夜行者

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
第三十一天用js写一个可以拖动的div

无论如何，先感谢一下我的同事，而且还是妹子，为了帮我，给我写了一个这个可拖动的div的代码，所有的代码都是用hbuilder工具写的，工具可以自己去百度搜索。这个是给我基础测试题的哪个实习生教我的，我的思路一直在增加监听事件哪块。但是，别人一说我突然恍然大悟，原来还是可以通过事件绑定到对应的js就可以了,，感觉自己的思路不对，解决问题的思路不对，很多事情要做过之后才能懂，其实很多时候看书就是通
复制链接

扫一扫