Question

中

$("#sortable").sortable({
    cancel: ".fixed"
});
$("#sortable").disableSelection();

这个例子项目3,5是固定的，但是当我将项目7移动到上面的项目3项目3时将它的位置改为4，我希望它保持在第3位置（项目3和项目7）其余项目可以用户拖放。我该如何实现这一功能？

Answer 1

半解决方案是http://jsfiddle.net/wa1grxrh/1/

$("#sortable").sortable({
    cancel: ".fixed",
    start: function(event, ui) {
        var start_pos = ui.item.index();
        ui.item.data('last_pos', start_pos);
    },
    change: function(event, ui) {
        var last_pos = ui.item.data('last_pos'),
            index = ui.placeholder.index(),
            options = $(this).data().sortable.options;
        if (last_pos > index) {
            $(options.items, $(this)).slice(index, last_pos + 1).filter(options.cancel).each(function(ix) {
                $(this).prevAll().not('.ui-sortable-placeholder').first().detach().insertAfter(this);
            });
        } else if (last_pos < index) {
            $(options.items, $(this)).slice(last_pos, index + 1).filter(options.cancel).each(function(ix) {
                $(this).nextAll().not('.ui-sortable-placeholder').first().detach().insertBefore(this);
            });
        }
        ui.item.data('last_pos', ui.placeholder.index());
    },
});
$("#sortable").disableSelection();

但如果任何固定项目是第一个或最后一个或连续几个固定项目，则它不起作用。

我很害怕修改可排序模块需要完整的解决方案。需要防止占位符放在固定项目之间或项目列表的边缘。

JQuery Sortable with fixed row

1 个答案: