范围拖拽——限制拖拽范围的拖拽（不能超出屏幕）/ 磁性吸附的拖拽

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute;}
#img1 { position: absolute;}
</style>
<script>
window.onload = function() {
    
    var oDiv = document.getElementById('div1');
    var oImg = document.getElementById('img1');
    
    drag(oImg);
    
    drag(oDiv);
    
    function drag(obj) {
        
        obj.onmousedown = function(ev) {
            var ev = ev || event;
            
            var disX = ev.clientX - this.offsetLeft;
            var disY = ev.clientY - this.offsetTop;
            
            if ( obj.setCapture ) {
                obj.setCapture();
            }
            
            document.onmousemove = function(ev) {
                var ev = ev || event;
                
                var L = ev.clientX - disX; //拖动元素左侧的位置=当前鼠标距离浏览器左侧的距离 - （物体宽度的一半）
                var T = ev.clientY - disY; //拖动元素顶部的位置=当前鼠标距离浏览器顶部的距离 - （物体高度的一半）
                
                if ( L < 0 ) {  //如果左侧的距离小于0，就让距离等于0.不能超出屏幕左侧。如果需要磁性吸附，把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';
                
            }
            
            document.onmouseup = function() {
                document.onmousemove = document.onmouseup = null;
                if ( obj.releaseCapture ) {
                    obj.releaseCapture();
                }
            }
            
            return false;
            
        }
        
    }
    
}
</script>
</head>

<body>
    <div id="div1"></div>
    <img src="1.jpg" id="img1" />
</body>
</html>

 

posted @ 2017-04-12 16:23  念念念不忘  阅读(3562)  评论(0)    收藏  举报