jquery - 无法将可排序属性应用于我页面中的小部件

Question

我在运行我的页面时收到以下错误

$(".column").sortable is not a 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');
        }
    });
}

我在我的 ASPX 页面中包含以下内容：

<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" />

我仍然收到错误消息。谁能帮我解决这个问题？

Answer 1

这也发生在我身上，我发现由于某些原因

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

});

不能正常工作。所以我所做的是创建了一个如下所示的新函数并在其中定义了所有关联

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

当您的控件准备就绪并且一切顺利时调用此函数。