Gridster Uncaught TypeError and Draggable

I am new to gridster, and I am trying to resize a widget. When I create a widget I add a

<span class="gs-resize-handle gs-resize-handle-both"></span> 

inside each < li > < /li >. I found this being used on a few widget resize examples on the gridster website.

When I hover over the span my mouse turns into a hand, but when I try and drag the corner of the widget I am only able to move the widget not resize the wiget.

Here is my anonymous function:

$(function(){ //DOM Ready

    gridster= $(".gridster ul").gridster({
        widget_margins: [4, 4],
        widget_base_dimensions: [182, 75],
        helper: 'clone',
        resize: {
            enable: true
        }
    }).data('gridster');

    gridster.add_widget('<li class="dragItem Header">Header<span class="gs-resize-handle gs-resize-handle-both"></span></li>');
    gridster.add_widget('<li class="dragItem Summary">Summary<span class="gs-resize-handle gs-resize-handle-both"></span></li>');
    gridster.add_widget('<li class="dragItem Image">Image<span class="gs-resize-handle gs-resize-handle-both"></span></li>');
    gridster.add_widget('<li class="dragItem Image">Image<span class="gs-resize-handle gs-resize-handle-both"></span></li>');
    gridster.add_widget('<li class="dragItem LF">LF<span class="gs-resize-handle gs-resize-handle-both"></span></li>');
    gridster.add_widget('<li class="dragItem RF">RF<span class="gs-resize-handle gs-resize-handle-both"></span></li>');
    gridster.add_widget('<li class="dragItem LB">LB<span class="gs-resize-handle gs-resize-handle-both"></span></li>');
    gridster.add_widget('<li class="dragItem RB">RB<span class="gs-resize-handle gs-resize-handle-both"></span></li>');
    gridster.add_widget('<li class="dragItem Footer">Footer<span class="gs-resize-handle gs-resize-handle-both"></span></li>');

});

My questions is how can I make my widgets resizable by dragging them.

http://jsfiddle.net/Ljqep1a2/

You made a small error here :

enable: true

should be

enabled: true