拖拽封装（图片、div）

一、普通写法

调用方法：drag(元素);

var oImg = document.getElementById('img1');
drag(oImg);

函数主体

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) { //如果存在setCapture()说明是IE678，所以需要设置全局捕获来阻止拖拽时的默认行为
            obj.setCapture();
        }

        document.onmousemove = function(ev) { //当鼠标移动的时候执行的函数
            var ev = ev || event; //事件的浏览器兼容性
            obj.style.left = ev.clientX - disX + 'px'; //拖动元素左侧的位置=当前鼠标距离浏览器左侧的距离 - （物体宽度的一半）
            obj.style.top = ev.clientY - disY + 'px'; //拖动元素顶部的位置
        }

        document.onmouseup = function() { //鼠标放开时执行的函数
            document.onmousemove = document.onmouseup = null; //清空鼠标移动时的函数
            if (obj.releaseCapture) { //如果存在releaseCapture()说明是IE678，所以需要解除刚才设置的全局捕获
                obj.releaseCapture();
            }
        }

        return false; //取消文字选择的默认行为
    }

}

完整例子：

<!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);  //div调用封装拖拽函数
    
    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 ) {  //如果存在setCapture()说明是IE678，所以需要设置全局捕获来阻止拖拽时的默认行为
                obj.setCapture();
            }
            
            document.onmousemove = function(ev) { //当鼠标移动的时候执行的函数
                var ev = ev || event;//事件的浏览器兼容性
                
                obj.style.left = ev.clientX - disX + 'px';  //拖动元素左侧的位置=当前鼠标距离浏览器左侧的距离 - （物体宽度的一半）
                obj.style.top = ev.clientY - disY + 'px';//拖动元素顶部的位置
            }
            
            document.onmouseup = function() { //鼠标放开时执行的函数
                document.onmousemove = document.onmouseup = null; //清空鼠标移动时的函数
                if ( obj.releaseCapture ) {  //如果存在releaseCapture()说明是IE678，所以需要解除刚才设置的全局捕获
                    obj.releaseCapture();
                }
            }
            
            return false;  //取消文字选择的默认行为
            
        }
        
    }
    
}
</script>
</head>

<body>
    <div id="div1"></div>
    <img src="1.jpg" id="img1" /> <!--需要在那个范围内拖拽，div就在哪个父级内-->
</body>
</html>

二、面向对象写法

window.onload = function(){  
    var d1 = new Drag('div1');
    d1.init();    
};

function Drag(id){
    this.oDiv = document.getElementById(id);
    this.disX = 0;
    this.disY = 0;
}
Drag.prototype.init = function(){ 
    var This = this;    
    this.oDiv.onmousedown = function(ev){
        var ev = ev || window.event;
        This.fnDown(ev);    
        return false;
    };
};
Drag.prototype.fnDown = function(ev){    
    var This = this;
    this.disX = ev.clientX - this.oDiv.offsetLeft;
    this.disY = ev.clientY - this.oDiv.offsetTop;    
    document.onmousemove = function(ev){
        var ev = ev || window.event;
        This.fnMove(ev);
    };
    document.onmouseup = this.fnUp;    
};
Drag.prototype.fnMove = function(ev){
    this.oDiv.style.left = ev.clientX - this.disX + 'px';
    this.oDiv.style.top = ev.clientY - this.disY + 'px';
};
Drag.prototype.fnUp = function(){
    document.onmousemove = null;
    document.onmouseup = null;
};

<div id="div1"></div>

使用方法：

window.onload = function(){    
    var d1 = new Drag('div1');  //div1为需要拖拽的div的id
    d1.init();  //调用init方法
};

三、继承的写法

<!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;}
#div2{ width:100px; height:100px; background:yellow; position:absolute; left:100px;}
</style>
<script>
window.onload = function(){
    var d1 = new Drag('div1');
    d1.init();
    var d2 = new ChildDrag('div2');
    d2.init();
};
function Drag(id){  //父类构造函数
    this.obj = document.getElementById(id);
    this.disX = 0;
    this.disY = 0;
}
Drag.prototype.init = function(){  //父类方法
    var This = this;
    this.obj.onmousedown = function(ev){
        var ev = ev || window.event;
        This.fnDown(ev);        
        document.onmousemove = function(ev){
            var ev = ev || window.event;
            This.fnMove(ev);
        };
        document.onmouseup = function(){
            This.fnUp();
        };
        return false;
    };    
};
Drag.prototype.fnDown = function (ev) {   //父类方法
    this.disX = ev.clientX - this.obj.offsetLeft;
    this.disY = ev.clientY - this.obj.offsetTop;
};
Drag.prototype.fnMove = function (ev) {  //父类方法
    this.obj.style.left = ev.clientX - this.disX + 'px';
    this.obj.style.top = ev.clientY - this.disY + 'px';
};
Drag.prototype.fnUp = function () {  //父类方法
    document.onmousemove = null;
    document.onmouseup = null;
};

function ChildDrag(id){   //子类构造函数
    Drag.call(this,id);  //继承父类的属性
}
extend( ChildDrag.prototype , Drag.prototype );  //继承父类的方法
ChildDrag.prototype.fnMove = function(ev){  //重新改写父类的方法，定义子类自己的方法，使拖拽的元素拖拽时左右不能超出屏幕
    var L = ev.clientX - this.disX;
    var T = ev.clientY - this.disY;    
    if(L<0){
        L = 0;
    }
    else if(L>document.documentElement.clientWidth - this.obj.offsetWidth){
        L = document.documentElement.clientWidth - this.obj.offsetWidth;
    }    
    this.obj.style.left = L + 'px';
    this.obj.style.top = T + 'px';
};
function extend(obj1,obj2){  //封装的继承方法的函数
    for(var attr in obj2){
        obj1[attr] = obj2[attr];
    }
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

posted @ 2017-04-12 15:01 念念念不忘阅读(349) 评论(0) 收藏举报

刷新页面返回顶部

念念念不忘

拖拽封装（图片、div）

公告