Question

I have this Drag Drop UI, here, created from this tutorial http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/

I am having problems when I don’t want a widget to be undraggable/unsortable. At the moment it is set that ‘Widget 1’ can’t be dragged. If I remove it from the widgetIndividual object it breaks the whole functionality. Ideally these should be defined on the page and not in a separate js file.

If I remove the following code from widgetIndividual it breaks everything.

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

Please help get this working.

You can download code here

Thanks

Answer 1

There is a bug in the method makeSortable that produces an invalid jQuery selector.

Here is the method (I have removed the not relevant code):

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);

        })();

    ...

}

The $sortableItems is obtained (with an auto-executing function) by checking the movable option of the widgets and return a filtered list using the :not() pseudo-selector.

The problem is that when all widgets are movable, the variable notSortable will be empty and this will produce an invalid jquery selector > li:not().

This is happening when you remove the specific settings for the weather widget. The weather has movable: false. If you remove the settings, all widgets will be movable, and the bug occurs.

Change the return statement to only use :not() when notSortable is not empty:

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

DEMO