jquery插件-自由拖拽

最近工作不是很忙，学习之余想整理一些代码出来，首先想到的就是是js拖拽。 两年前去某公司面试的时候，曾经被问过这个问题，如何在页面上拖放元素，尽管现在看起来很简单，但当时的我半点思路都没有，面试想当然失败了。 这两天趁空闲整理出一个自由拖拽的jquery插件：jquery.jsDrag.js。

js拖拽主要用到了鼠标三个事件：mousedown、mousemove、mouseup。

mousedown：鼠标按下

mouseup：鼠标松开

mousemove：鼠标移动

mousedown和click的区别：鼠标点击的整个过程会发生 mousedown→mouseup→click三个事件， click在最后鼠标松开之后才会发生。

htm框架：<div class="jsDrag" ><div class="drager"></div></div>，.drager素是我们点击拖拽的元素，.jsDrag为拖拽元素可移动的空间。

调用方式：$(".jsDrag").drag(setting)  目前提供三种方式，自由拖拽，横向拖拽，纵向拖拽，省略参数的情况下为自由拖拽

现在只接收一个属性

type:free|horizontal|vertical   

 

插件源码：

JS

(function($){
    $.fn.extend({
        drag: function(setting){
            var settting = setting || {};
            var config = {
                type: "free"
            };
            config = $.extend(config, setting);
            
            this.each(function(){
                var $panel = $(this) ;
                var $drag = $panel.find(".drager");
                var coor = {};
                var pos = {};
                var flag = false;
                
                $drag.mousedown(function(evt){ 
                    coor.cX = evt.clientX;
                    coor.cY = evt.clientY;
                    pos.left = parseInt($drag.css("left"));
                    pos.top =  parseInt($drag.css("top")); 
                    flag = true;
                });
                
                $(document).mousemove(function(evt){
                    if (flag) {
                        var maxWidth = $panel.width() - $drag.width();
                        var maxHeight = $panel.height() - $drag.height(); 
                        var nowLeft = (pos.left+(evt.clientX-coor.cX));
                        var nowTop = (pos.top+(evt.clientY-coor.cY));
                        
                        pos.left = nowLeft <= 0 ? 0 : (nowLeft > maxWidth ? maxWidth : nowLeft);
                        pos.top = nowTop <= 0 ? 0 : (nowTop > maxHeight ? maxHeight : nowTop);
                         
                        var cssParam = {"left": pos.left, "top":pos.top};
                        switch (config.type) {
                            case "free" :
                                break;
                            case "horizontal" :
                                delete cssParam["top"];
                                break;
                            case "vertical" :
                                delete cssParam["left"];
                                break;
                        }
                        
                        $drag.css(cssParam);
                        
                        coor.cX = evt.clientX;
                        coor.cY = evt.clientY;
                    }
                }).mouseup(function(evt){ 
                    flag = false;
                }); 
            });
            return this;
        }
    });
})(jQuery);

CSS

.jsDrag {
                position:relative;
                width:800px;
                height:50px;
                margin:0 auto;
                background:#FF0;
                border:1px solid #ccc;
            }
            
            .drager {
                background:#000;
                width:10px;
                height:10px;
                position:absolute;
                top:0;
                left:0;
                cursor:pointer;
            }

 需要注意的是，不要给.jsDrag 设置padding等样式， 有需要的话可以把样式设置到.jsDrag父元素上

点击下载demo