Question

I am getting the following error on running my page

$(".column").sortable is not a function

Following is the code that I am using to call the sortable function.

function makeSortable() {
    var $sortableItems = $('> li', settings.columns);

    $('.column').sortable({
        items: $sortableItems,
        connectWith: $(settings.columns),
        handle: settings.handleSelector,
        placeholder: 'widget-placeholder',
        forcePlaceholderSize: true,
        revert: 300,
        delay: 100,
        opacity: 0.8,
        containment: 'document',
        start: function (e, ui) {
            $(ui.helper).addClass('dragging');
        },
        stop: function (e, ui) {
            $(ui.item).css({ width: '' }).removeClass('dragging');
            $(settings.columns).sortable('enable');
        }
    });
    $sortableItems.find(settings.handleSelector).css({
        cursor: 'move'
    }).mousedown(function (e) {
        $sortableItems.css({ width: '' });
        $(this).parent().css({
            width: $(this).parent().width() + 'px'
        });
    }).mouseup(function () {
        if (!$(this).parent().hasClass('dragging')) {
            $(this).parent().css({
                width: $(".widget-placeholder").width() + 'px'
            });
        } else {
            $(settings.columns).sortable('disable');
        }
    });
}

I have included the following in my ASPX page:

<script src="../../Scripts/Management/jquery-1.8.2.js" type="text/javascript"></script>
<script src="../../Scripts/Management/jquery-ui.min.js" type="text/javascript"></script>
<script src="../../Scripts/Management/Widgets.js" type="text/javascript"></script>
<link href="../../Scripts/Management/jquery-ui.css" rel="stylesheet" type="text/css" />

Still I am getting the error. Can anyone help me sorting this thing out?

Answer 1

this happened same with me also
what I found out that for some reasons

 $('.column').sortable({
        items: $sortableItems,
        connectWith: $(settings.columns),
        handle: settings.handleSelector,
        placeholder: 'widget-placeholder',
        forcePlaceholderSize: true,
        revert: 300,.....

});

does not works fine.
So what I did was created a new function like the following and defined all the associations in that

function makeSortable() {
    $('.column').sortable();
    $(".column").sortable("option", "connectWith", ".column");
    $(".column").sortable("option", "handle", ".moveHeader");
}

Call this function when ever your controls are ready and you are good to go.