鼠标拖拽和吸附功能

最新推荐文章于 2024-07-04 16:24:46 发布

weixin_30565327

最新推荐文章于 2024-07-04 16:24:46 发布

阅读量492

点赞数

文章标签： javascript 游戏 c/c++ ViewUI

原文链接：http://www.cnblogs.com/pjw2017/p/6307113.html

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{margin: 0; padding: 0; background: black;}
#div1{width:120px; height: 120px; background: gray; position: absolute;}
</style>

</head>
<body>
<div id = "div1"></div>
<script type="text/javascript">
    var oDiv = document.getElementById('div1');

    var disX = 0;
    var disY = 0;
    
    oDiv.onmousedown = function(ev){
        var oEvent = ev||event;

        disX = oEvent.clientX - oDiv.offsetLeft;
        disY = oEvent.clientY - oDiv.offsetTop;

        //oDiv.onmousemove = function(ev){
        document.onmousemove = function(ev){
            var oEvent = ev||event;
            var l = oEvent.clientX - disX;
            var t = oEvent.clientY - disY;

            if(l<30)
            {
                l = 0;//为了不让div移出浏览器
            }
            else if(l>(document.documentElement.clientWidth-oDiv.offsetWidth))
            {
                //让div不能从浏览器右边出去  浏览器可视区的宽度-div的宽
                l = document.documentElement.clientWidth-oDiv.offsetWidth;
            }
            else if(t>(document.documentElement.clientHeight-oDiv.offsetHeight))
            {
                t = document.documentElement.clientHeight-oDiv.offsetHeight;
            }
            else if (t<30)
            {
                t = 0;
            }

            oDiv.style.left = l + 'px';
            oDiv.style.top = t + 'px';

        }
            //oDiv.onmouseup = function(ev){
            document.onmouseup = function(){
            //oDiv.onmousemove = null;//清空当次鼠标移动事件(=null解除事件绑定函数)
            document.onmousemove = null;
            document.onmouseup = null;
        }
            return false;//阻止火狐浏览器拖拽空div的默认bug事件和谷歌、IE9的默认事件
    }

</script>
</body>
</html>

转载于:https://www.cnblogs.com/pjw2017/p/6307113.html

weixin_30565327

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标拖拽和吸附功能

<!doctype html><html><head><meta charset="utf-8"><title></title><style>body{margin: 0; padding: 0; background: black;}#div1{width:120px; heigh...
复制链接

扫一扫