easyui源码翻译1.32--Draggable（拖动）

前言

使用$.fn.draggable.defaults重写默认值对象。下载该插件翻译源码

源码

/**
 * jQuery EasyUI 1.3.2
 * 
 *翻译：qq 1364386878 --拖动
 */
(function ($) {
    var dragging = false;
    function drag(e) {
        var target = $.data(e.data.target, "draggable");
        var options = target.options;
        var proxy = target.proxy;
        var dragData = e.data;
        var left = dragData.startLeft + e.pageX - dragData.startX;
        var top = dragData.startTop + e.pageY - dragData.startY;
        if (proxy) {
            if (proxy.parent()[0] == document.body) {
                if (options.deltaX != null && options.deltaX != undefined) {
                    left = e.pageX + options.deltaX;
                } else {
                    left = e.pageX - e.data.offsetWidth;
                }
                if (options.deltaY != null && options.deltaY != undefined) {
                    top = e.pageY + options.deltaY;
                } else {
                    top = e.pageY - e.data.offsetHeight;
                }
            } else {
                if (options.deltaX != null && options.deltaX != undefined) {
                    left += e.data.offsetWidth + options.deltaX;
                }
                if (options.deltaY != null && options.deltaY != undefined) {
                    top += e.data.offsetHeight + options.deltaY;
                }
            }
        }
        if (e.data.parent != document.body) {
            left += $(e.data.parent).scrollLeft();
            top += $(e.data.parent).scrollTop();
        }
        if (options.axis == "h") {//拖动方向
            dragData.left = left;
        } else {
            if (options.axis == "v") {
                dragData.top = top;
            } else {
                dragData.left = left;
                dragData.top = top;
            }
        }
    };
    
    function applyDrag(e) {
        var Drag = $.data(e.data.target, "draggable");
        var options = Drag.options;
        var proxy = Drag.proxy;
        if (!proxy) {
            proxy = $(e.data.target);
        }
        proxy.css({ left: e.data.left, top: e.data.top });
        $("body").css("cursor", options.cursor);
    };

    function doDown(e) {
        dragging = true;
        var Drag = $.data(e.data.target, "draggable");
        var options = Drag.options;
        var droppables = $(".droppable").filter(function () {
            return e.data.target != this;
        }).filter(function () {
            var accept = $.data(this, "droppable").options.accept;
            if (accept) {
                return $(accept).filter(function () {
                    return this == e.data.target;
                }).length > 0;
            } else {
                return true;
            }
        });
        Drag.droppables = droppables;
        var proxy = Drag.proxy;
        if (!proxy) {
            if (options.proxy) {
                if (options.proxy == "clone") {
                    proxy = $(e.data.target).clone().insertAfter(e.data.target);
                } else {
                    proxy = options.proxy.call(e.data.target, e.data.target);
                }
                Drag.proxy = proxy;
            } else {
                proxy = $(e.data.target);
            }
        }
        proxy.css("position", "absolute");
        drag(e);
        applyDrag(e);
        options.onStartDrag.call(e.data.target, e);
        return false;
    };

    function doMove(e) {
        var Dtarget = $.data(e.data.target, "draggable");
        drag(e);
        if (Dtarget.options.onDrag.call(e.data.target, e) != false) {
            applyDrag(e);
        }
        var source = e.data.target;
        Dtarget.droppables.each(function () {
            var dropObj = $(this);
            if (dropObj.droppable("options").disabled) {
                return;
            }
            var p2 = dropObj.offset();
            if (e.pageX > p2.left && e.pageX < p2.left + dropObj.outerWidth() && e.pageY > p2.top && e.pageY < p2.top + dropObj.outerHeight()) {
                if (!this.entered) {
                    $(this).trigger("_dragenter", [source]);
                    this.entered = true;
                }
                $(this).trigger("_dragover", [source]);
            } else {
                if (this.entered) {
                    $(this).trigger("_dragleave", [source]);
                    this.entered = false;
                }
            }
        });
        return false;
    };

    function doUp(e) {
        dragging = false;
        doMove(e);
        var DragObj = $.data(e.data.target, "draggable");
        var proxy = DragObj.proxy;
        var options = DragObj.options;
        if (options.revert) {
            if (checkDrop() == true) {
                $(e.data.target).css({ position: e.data.startPosition, left: e.data.startLeft, top: e.data.startTop });
            } else {
                if (proxy) {
                    var left, top;
                    if (proxy.parent()[0] == document.body) {
                        left = e.data.startX - e.data.offsetWidth;
                        top = e.data.startY - e.data.offsetHeight;
                    } else {
                        left = e.data.startLeft;
                        top = e.data.startTop;
                    }
                    proxy.animate({ left: left, top: top }, function () {
                        removeProxy();
                    });
                } else {
                    $(e.data.target).animate({ left: e.data.startLeft, top: e.data.startTop }, function () {
                        $(e.data.target).css("position", e.data.startPosition);
                    });
                }
            }
        } else {
            $(e.data.target).css({ position: "absolute", left: e.data.left, top: e.data.top });
            checkDrop();
        }
        options.onStopDrag.call(e.data.target, e);
        $(document).unbind(".draggable");
        setTimeout(function () {
            $("body").css("cursor", "");
        }, 100);
        function removeProxy() {
            if (proxy) {
                proxy.remove();
            }
            DragObj.proxy = null;
        };
        function checkDrop() {
            var dropped = false;
            DragObj.droppables.each(function () {
                var dropObj = $(this);
                if (dropObj.droppable("options").disabled) {
                    return;
                }
                var p2 = dropObj.offset();
                if (e.pageX > p2.left && e.pageX < p2.left + dropObj.outerWidth() && e.pageY > p2.top && e.pageY < p2.top + dropObj.outerHeight()) {
                    if (options.revert) {
                        $(e.data.target).css({ position: e.data.startPosition, left: e.data.startLeft, top: e.data.startTop });
                    }
                    removeProxy();
                    $(this).trigger("_drop", [e.data.target]);
                    dropped = true;
                    this.entered = false;
                    return false;
                }
            });
            if (!dropped && !options.revert) {
                removeProxy();
            }
            return dropped;
        };
        return false;
    };
    //实例化插件
    $.fn.draggable = function (options, param) {
        if (typeof options == "string") {
            return $.fn.draggable.methods[options](this, param);
        }
        return this.each(function () {
            var options;
            var target = $.data(this, "draggable");
            if (target) {
                target.handle.unbind(".draggable");
                options = $.extend(target.options, options);
            } else {
                options = $.extend({}, $.fn.draggable.defaults, $.fn.draggable.parseOptions(this), options || {});
            }
            if (options.disabled == true) {
                $(this).css("cursor", "");
                return;
            }
            var handle = null;
            if (typeof options.handle == "undefined" || options.handle == null) {
                handle = $(this);
            } else {
                handle = (typeof options.handle == "string" ? $(options.handle, this) : options.handle);
            }
            $.data(this, "draggable", { options: options, handle: handle });
            handle.unbind(".draggable").bind("mousemove.draggable", { target: this }, function (e) {
                if (dragging) {
                    return;
                }
                var options = $.data(e.data.target, "draggable").options;
                if (checkArea(e)) {
                    $(this).css("cursor", options.cursor);
                } else {
                    $(this).css("cursor", "");
                }
            }).bind("mouseleave.draggable", { target: this }, function (e) {
                $(this).css("cursor", "");
            }).bind("mousedown.draggable", { target: this }, function (e) {
                if (checkArea(e) == false) {
                    return;
                }
                $(this).css("cursor", "");
                var position = $(e.data.target).position();
                var offset = $(e.data.target).offset();
                var data = {
                    startPosition: $(e.data.target).css("position"),
                    startLeft: position.left, startTop: position.top,
                    left: position.left,
                    top: position.top,
                    startX: e.pageX,
                    startY: e.pageY,
                    offsetWidth: (e.pageX - offset.left),
                    offsetHeight: (e.pageY - offset.top),
                    target: e.data.target,
                    parent: $(e.data.target).parent()[0]
                };
                $.extend(e.data, data);
                var options = $.data(e.data.target, "draggable").options;
                if (options.onBeforeDrag.call(e.data.target, e) == false) {
                    return;
                }
                $(document).bind("mousedown.draggable", e.data, doDown);
                $(document).bind("mousemove.draggable", e.data, doMove);
                $(document).bind("mouseup.draggable", e.data, doUp);
            });
            function checkArea(e) {
                var dropObj = $.data(e.data.target, "draggable");
                var handle = dropObj.handle;
                var offset = $(handle).offset();
                var left = $(handle).outerWidth();
                var top = $(handle).outerHeight();
                var t = e.pageY - offset.top;
                var r = offset.left + left - e.pageX;
                var b = offset.top + top - e.pageY;
                var l = e.pageX - offset.left;
                return Math.min(t, r, b, l) > dropObj.options.edge;
            };
        });
    };
    //拖动默认的方法
    $.fn.draggable.methods = {
        //返回属性对象
        options: function (jq) {
            return $.data(jq[0], "draggable").options;
        },
        //如果代理属性被设置则返回该拖动代理元素
        proxy: function (jq) {
            return $.data(jq[0], "draggable").proxy;
        },
        //允许拖动
        enable: function (jq) {
            return jq.each(function () {
                $(this).draggable({ disabled: false });
            });
        },
        //禁止拖动
        disable: function (jq) {
            return jq.each(function () {
                $(this).draggable({ disabled: true });
            });
        }
    };
    //属性转换器
    $.fn.draggable.parseOptions = function (target) {
        var t = $(target);
        return $.extend({}, $.parser.parseOptions(target, ["cursor", "handle", "axis", { "revert": "boolean", "deltaX": "number", "deltaY": "number", "edge": "number" }]), { disabled: (t.attr("disabled") ? true : undefined) });
    };
    //拖动默认配置--属性 事件
    $.fn.draggable.defaults = {
        proxy: null,//在拖动的时候使用的代理元素，当使用'clone'的时候，将使用该元素的一个复制元素来作为替代元素。如果指定了一个函数,它将返回一个jquery对象
        revert: false,//如果设置为true，在拖动停止时元素将返回起始位置
        cursor: "move",//拖动时的CSS指针样式
        deltaX: null,//被拖动的元素对应于当前光标位置x
        deltaY: null,//被拖动的元素对应于当前光标位置y
        handle: null,//开始拖动的句柄
        disabled: false,//如果设置为true，则停止拖动
        edge: 0,//可以在其中拖动的容器的宽度
        axis: null,//定义元素移动的轴向，可用值有：'v'或'h'，当没有设置或设置为null时可同时在水平和垂直方向上拖动
        //在拖动之前触发，返回false将取消拖动
        onBeforeDrag: function (e) {
        },
        //在目标对象开始被拖动时触发
        onStartDrag: function (e) {
        },
        //在拖动过程中触发，当不能再拖动时返回false
        onDrag: function (e) {
        },
        //在拖动停止时触发
        onStopDrag: function (e) {
        }
    };
})(jQuery);

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic Draggable - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
    <script src="../../plugins2/jquery.parser.js"></script>
    <script src="../../plugins2/jquery.draggable.js"></script>
</head>
<body>
    <h2>Basic Draggable</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>Move the boxes below by clicking on it with mouse.</div>
    </div>
    <div style="margin:10px 0;"></div>
    <div class="easyui-draggable" style="200px;height:150px;background:#fafafa;border:1px solid #ccc"></div>
    <div class="easyui-draggable" data-options="handle:'#title'" style="200px;height:150px;background:#fafafa;border:1px solid #ccc;margin-top:10px">
        <div id="title" style="padding:5px;background:#ccc;color:#fff">Title</div>
    </div>
</body>
</html>

插件效果