Question

我正在从Brice Burgess屠杀一个非常标准的“拖动和调整大小”jQuery插件。我尝试通过传递一个可选的“保持比率”参数来调整它，以在调整大小时约束宽度和高度。这很好用，但如果我尝试在两个不同的元素上运行插件，那么它们都将使用最后一个的选项。有人可以帮助我理解如何确保每个实例都有自己独立的选项吗？

(function($) {
var ratio, minx;

$.fn.jqDrag = function(options) {
    var settings = $.extend({
        div: ".jqDrag"
    }, options);

    return i(this, settings.div, 'drag');
};

$.fn.jqResize = function(options) {
    var settings = $.extend({
        minx: 15, // we don't have miny as it would not work when we want to keep proportions
        div: ".jqResize",
        keepRatio: false
    }, options);

    ratio = settings.keepRatio;
    minx = settings.minx;

    return i(this, settings.div, 'resize');
};

$.jqDnR = {
    dnr: {},
    e: 0,
    drag: function(v) {
        if (M.k == 'drag')
        {
            E.css({
               left: M.X + v.pageX - M.pX,
               top: M.Y + v.pageY - M.pY
           });
        }
        else {
            var width = Math.max(v.pageX - M.pX + M.W, 0);
            width = (width < minx) ? minx : width;
            var height = Math.max(v.pageY - M.pY + M.H, 0);
            height = (ratio == true) ? width / (E.width() / E.height()) : height;
            E.css({width: width, height: height});
        }

        // stupid ie dropping the filter when dragging
        try {
            document.getElementById(E.attr('id')).style.removeAttribute('filter');
        }
        catch (e) {}

        return (false);
    },
    stop: function() {
        E.css('opacity', M.o);
        // stupid ie dropping the filter when dragging
        $(document).unbind('mousemove', J.drag).unbind('mouseup', J.stop);
        try {
            document.getElementById(E.attr('id')).style.removeAttribute('filter');
        }
        catch (e) {}
    }
};
var J = $.jqDnR,
M = J.dnr,
E = J.e,
i = function(e, h, k) {
    return e.each(function() {
        h = (h) ? $(h, e) : e;
        h.bind('mousedown', {
            e: e,
            k: k
        },
        function(v) {
            var d = v.data,
            p = {};
            E = d.e;
            // attempt utilization of dimensions plugin to fix IE issues
            if (E.css('position') != 'relative') {
                try {
                    E.position(p);
                } catch(e) {}
            }
            M = {
                X: p.left || f('left') || 0,
                Y: p.top || f('top') || 0,
                W: f('width') || E[0].scrollWidth || 0,
                H: f('height') || E[0].scrollHeight || 0,
                pX: v.pageX,
                pY: v.pageY,
                k: d.k,
                o: E.css('opacity')
            };
            E.css({opacity: 0.8});
            $(document).mousemove($.jqDnR.drag).mouseup($.jqDnR.stop);
            return (false);
        });
    });
},
f = function(k) {
    return parseInt(E.css(k)) || false;
};
})(jQuery);

Answer 1

对于任何有兴趣的人，我发现的解决方案是将设置存储在jQuery的.data（）中。这对我来说就像是一种魅力 $（this）.data（{'ratio'：settings.keepRatio，'minx'：settings.minx}）;

jQuery插件：维护跨对象的选项

1 个答案: