Sub Options for jquery plugin

Question

I'm developing a plugin. A drag n' drop plugin to be exact.

My Defaults look like this:

var defaults = {
    activeClass: false,
    containment: false,
    cookies: true,
    cookieExdate: 65,
    cursor: 'crosshair',
    cursorAt: {
        top: false,
        bottom: false,
        left: false,
        right: false
    },
    delay: 0,
    distance: 0,
    dragLimitation: false,
    ghostDrop: true,
    ghostOpacity: '0.50',
    ghostRevert: false,
    grid: [20,50],
    handle:false,
    iFrameFix: true,
    instantGhost: false,
    not: false,
    onDrop: function() {},
    onPickUp: function() {},
    radialDrag: true,
    radialOutline: false,
    radius: 100,
    revert: false,
    revertDuration: 500,
    strictMovement: false,
    target: {
        init: '#container',
        lock: false,
        offTarget: function(t) {
            $(t).removeClass('i');
        },
        onTarget: function(t) {
            $(t).addClass('i');
        }
    },
    zIndex: false
}

Then I use:

var o = $.extend(defaults, options)

To get the value of the default.

Ex. o.cursorAt.left. This would get the value of the Sub option left in cursorAt As you see I have sub options (what I call them) and they look like this:

cursorAt: {
    top: false,
    bottom: false,
    left: false,
    right: false
},

When I use this in my plugin I want to only have to use one. For example:

cursorAt: {
    bottom: 0
}

But this doesn't work and I know this is because in the defaults in the cursorAt spot the following must be there:

{
    top: false,
    bottom: false,
    left: false,
    right: false
}

Is there a way to make it work so I only need to name one. Any easy way? Or would this be a hard and complicated process. My plugin code is already of 1000 lines so I wouldn't like to make major changes.

Jsfiddle examples:

This works:

http://jsfiddle.net/C4f97/

But this doesn't: http://jsfiddle.net/C4f97/1/ << I need this to work...

Any comments on my plugin would be nice ;) Thanks in advance!

Answer 1

Try this instead:

var o = $.extend(true, {}, defaults, options);

There are two notable details here. The first is the boolean true, which tells jQuery to extend them recursively (not overwrite your "suboptions").

The second is the {}, which creates a new object, so you aren't actually modifying your defaults each time you create a new instance.

Answer 2

When you copy the options to your defaults, you want to use a "deep copy", which recurses through sub-objects and copies everything.

$.extend(true, defaults, options);

http://api.jquery.com/jQuery.extend/

Answer 3

Use $.extend(true, defaults, options) to deep copy to recursive merging. jQuery.extend