不断优化，重构我的代码-----拖拽jquery插件

最近学东西学的有点太散了，歇一阵子，重新完善之前的JQ插件，今天先上拖拽吧

// JavaScript Document
(function($){
    var defaults = {
        actionElement : "",     //获得事件的元素，非必填项
        rangeElement : window, //可拖动范围的元素 非必填
        direction : "", //默认为空，表示何以任意拖动， 可选值为vertical或者horizontal
        magnetic : 0  //磁性吸附尺寸 非必填
    }

    var opts = ""; //储存参数

    var disX;
    var disY;

    //保存后续需要操作的元素
    var dragEle,actionEle,rangeElement;

    //像jQuery对象下添加方法
    $.fn.drag = function( options ) {

        opts = $.extend( defaults , options || {} );
        dragEle = $( this );

        rangeEle = $( opts.rangeElement );

        var actionSelector;
        opts.actionElement != "" ? actionSelector = opts.actionElement : actionSelector = null ;    

        dragEle.on("mousedown",actionSelector,dragFn);

        return $(this).each(function(){});
    }

    //限制范围
    function range ( value , maxValue , minValue) {
        if( value > maxValue - opts.magnetic ){
            return maxValue;
        }else if( value < minValue + opts.magnetic ){
            return minValue;
        }
        return value;
    }

    //拖拽的主体函数
    function dragFn(ev){

        disX = ev.clientX - dragEle.offset().left;
        disY = ev.clientY - dragEle.offset().top;

        $(document).on("mousemove",mousemove);
        $(document).on("mouseup",mouseup);

        return false;
    }

    //鼠标移动事件
    function mousemove (ev) {
        var left = ev.clientX - disX;
        var top = ev.clientY - disY;

        left = range(left , rangeEle.width() - dragEle.width() , 0);
        top = range(top , rangeEle.height() - dragEle.height() , 0);

        switch( opts.direction ){
            case "horizontal" :
                dragEle.css({"left" : left});
            break;
            case "vertical" :
                dragEle.css({"top" : top });
            break;
            default :
                dragEle.css({"left" : left,"top" : top });
            break;
        }
    }

    //鼠标抬起移除事件
    function mouseup () {
        $(document).off("mouseup",mouseup);
        $(document).off("mousemove",mousemove);
    }

})(jQuery)

使用方法

$("#drag").drag({
    actionElement : ".action",
    rangeElement : "#container",
    direction : "horizontal",
    magnetic : 15
});

暂时想不出来需要暴漏出来哪些参数比较有用，暂且这样，后续若有必要再修改