Question

我有从本教程here

创建的Drag Drop UI http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/

当我不希望窗口小部件无法打开/不可移动时，我遇到了问题。目前设置为“Widget 1”无法拖动。如果我从widgetIndividual对象中删除它会破坏整个功能。理想情况下，这些应该在页面上定义，而不是在单独的js文件中定义。

如果我从widgetIndividual中删除以下代码，则会破坏所有内容。

            weather : {
                movable: false,
                removable: true,
                collapsible: true,
                editable: false
            }

请帮助实现这一目标。

您可以下载代码here

由于

Answer 1

方法makeSortable中存在一个错误，它会生成无效的jQuery选择器。

这是方法（我删除了不相关的代码）：

makeSortable : function () {

    var iNettuts = this,
        ...
        $sortableItems = (function () {

            var notSortable = '';

            $(settings.widgetSelector,$(settings.columns)).each(function (i) {
                if (!iNettuts.getWidgetSettings(this.id).movable) {
                    if(!this.id) {
                        this.id = 'widget-no-id-' + i;
                    }
                    notSortable += '#' + this.id + ',';
                }
            });

            // when "notSortable" is empty, the selector
            // is "> li:not()" which is invalid
            return $('> li:not(' + notSortable + ')', settings.columns);

        })();

    ...

}

通过检查小部件的$sortableItems选项并使用movable伪选择器返回已过滤的列表来获取:not()（具有自动执行功能）。

问题是当所有小部件都是可移动的时，变量notSortable将为空，这将产生无效的jquery选择器> li:not()。

当您删除天气小部件的特定设置时，会发生这种情况。天气有movable: false。如果删除设置，所有小部件都将可移动，并且会发生错误。

当:not()不为空时，将return语句更改为仅使用notSortable：

return $('> li' + ( notSortable && notSortable !== '' ? ':not(' + notSortable + ')' : '' ), settings.columns);

<强> DEMO

Jquery UI Drag Drop定义了可以移动和不移动的内容

1 个答案: