JavaScript onmousedown选择元素,onmousemove拖动元素,onmouseup松开鼠标,磁性吸附效果示例

最新推荐文章于 2024-03-30 18:33:59 发布

戴宇琪

最新推荐文章于 2024-03-30 18:33:59 发布

阅读量5.4k

点赞数 1

分类专栏： WEB前端开发

本文链接：https://blog.csdn.net/yuqidai/article/details/51612709

版权

WEB前端开发专栏收录该内容

48 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript onmousedown选择元素,onmousemove拖动元素,onmouseup松开鼠标示例,磁性吸附效果</title>
<style>
#div1 { width:100px; height:100px; position:absolute; background-color:#7391C5; }
#img1 { position:absolute}
</style>
<script>
window.onload = function(){
    var oDiv = document.getElementById('div1');
    var oImg = document.getElementById('img1');
    
    tqfc(oDiv);
    tqfc(oImg);
    
    function tqfc(obj){
            obj.onmousedown = function(ev){
            var ev = ev || event;
            var oDivX = ev.clientX - this.offsetLeft;
            var oDivY = ev.clientY - this.offsetTop;
            obj.style.backgroundColor = 'red';
            
            //加入兼容问题
            if(obj.setCapture){
                obj.setCapture();
                }
            
            document.onmousemove = function(ev){  //注意这里是document
                var ev = ev || event;
                L = ev.clientX - oDivX;
                T = ev.clientY - oDivY;
                
                //限制不超出可视范围
                if(L<100){  //磁性吸附重点在于这里,原本是0,改成100
                    L = 0;
                    }else if(L>document.documentElement.clientWidth - obj.offsetWidth){
                        L = document.documentElement.clientWidth - obj.offsetWidth;
                        }
                        
                if(T<0){
                    T = 0;
                    }else if(T>document.documentElement.clientHeight - obj.offsetHeight){
                        T = document.documentElement.clientHeight - obj.offsetHeight;
                        }
                
                obj.style.left = L + 'px';
                obj.style.top = T + 'px';
                }
            return false;
            }
            obj.onmouseup = function(){
            document.onmousedown = document.onmousemove = null;
            obj.style.backgroundColor = '#7391C5';
            
            //加入兼容问题
            if( obj.releaseCapture ){
                obj.releaseCapture();
                }
            }
        }
    
    
    }
</script>
</head>
<body>
<div id="div1"></div>
<img src="标签图片/1.JPG" width="100" id="img1"/>
</body>
</html>

戴宇琪

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript onmousedown选择元素,onmousemove拖动元素,onmouseup松开鼠标,磁性吸附效果示例

JavaScript onmousedown选择元素,onmousemove拖动元素,onmouseup松开鼠标示例,磁性吸附效果#div1 { width:100px; height:100px; position:absolute; background-color:#7391C5; }#img1 { position:absolute}window.onload = functi
复制链接

扫一扫