jQuery实现拖动效果

本文将实现一个拖动效果，具体的效果类似qq客户端在桌面上任意位置拖动。

1.首先是HTML部分

<style>
*{margin: 0;padding: 0;}
html,body{
    height: 100%;//保证获取body的宽度是整个页面的宽度
    overflow: hidden;//防止出现滚动条
}
#move{
    position: absolute;
    top: 0;left: 0;
    width: 120px;
    height: 30px;
    border: 1px solid #f5f5f5;
    background: rgba(0,0,0,.5);
    cursor: all-scroll;//鼠标移上为拖动样式
}
</style>
</head>
<body>
<div id="move"></div>

主要想法为给#move设置鼠标事件，动态改变#move的top和left的值。

2.jQuery代码部分
第一步，分别获取body和#move的宽度和高度

    var width = parseInt($('body').css('width'));
    var height = parseInt($('body').css('height'));
    var moveW = parseInt($('#move').css('width'));
    var moveH = parseInt($('#move').css('height'));

第二步，给#move绑定鼠标按下事件

    $('#move').on('mousedown',function(e){
        var top = parseInt($(this).css('top'));
        var left = parseInt($(this).css('left'));
        x1 = e.pageX;
        y1 = e.pageY;
    }

第三步是当鼠标在#move上按下的时候$(document)的鼠标事件

$(document).on('mousemove',function(e){
    var x2 = e.pageX;
    var y2 = e.pageY;
    
    x2 = x2 - x1;//获取鼠标移动的宽度
    y2 = y2 - y1;//获取鼠标移动的高度
    x = left + x2;
    y = top + y2;
    
    //判断在x方向上移动是否已经到边缘部分
    if(x<=0){
        x = 0;
    }
    var _x = x + moveW;
    if(_x>=width){
        x = width - moveW;
    }
    
    //判断在y方向上移动是否已经到边缘部分
    if(y<=0){
        y = 0;
    }
    var _y = y + moveH;
    if(_y>=height){
        y = height - moveH;
    }
    $('#move').css({'top':y,'left':x});
    
});

第四步，鼠标卸载后的取消绑定事件

$("#move").on('mouseup',function(){
    $(document).unbind('mousemove');
});
//当鼠标超出网页之外时，取消绑定，避免鼠标移出网页返回后还能影响#move
$(document).on('mouseup',function(){
    $(document).unbind('mousemove');
});

最后简单封装成一个函数

(function(){
        //定义拖动对象
        var drag = function (obj){
            this.body = obj.body;
            this.move = obj.move;
            this.width = parseInt(this.body.css('width'));
            this.height = parseInt(this.body.css('height'));
            this.moveW = parseInt(this.move.css('width'));
            this.moveH = parseInt(this.move.css('height'));
            this.func();
            this.unbindM();
            this.unbindD();
        };
        //初始化函数
        drag.init = function(obj){
            new drag(obj);
        };
        
        drag.prototype.func = function(){
            var self = this;
            self.move.on('mousedown',function(e){
                var top = parseInt($(this).css('top'));
                var left = parseInt($(this).css('left'));
                x1 = e.pageX;
                y1 = e.pageY;
                
                $(document).on('mousemove',function(e){
                    var x2 = e.pageX;
                    var y2 = e.pageY;
                    
                    x2 = x2 - x1;
                    y2 = y2 - y1;
                    x = left + x2;
                    y = top + y2;
                    
                    if(x<=0){
                        x = 0;
                    }
                    var _x = x + self.moveW;
                    if(_x>=self.width){
                        x = self.width - self.moveW;
                    }
                    
                    if(y<=0){
                        y = 0;
                    }
                    var _y = y + self.moveH;
                    if(_y>=self.height){
                        y = self.height - self.moveH;
                    }
                    self.move.css({'top':y,'left':x});
                    
                });
            })
        };
        drag.prototype.unbindM = function(){
            this.move.on('mouseup',function(){
                $(document).unbind('mousemove');
            });
        };
        drag.prototype.unbindD = function(){
            $(document).on('mouseup',function(){
                $(document).unbind('mousemove');
            });
        }
       //在window上注册拖动对象 
        window['drag'] = drag;
    })(jQuery);
    //定义对象，将jquery对象作为属性保存
    var obj = {};
    obj.body = $('body');
    obj.move = $('#move');
    drag.init(obj);

jQuery实现拖动效果

推荐阅读更多精彩内容