Question

有没有办法可以在可排序的无序列表中禁用第一个占位符？

我仍然希望能够对第一个项目进行排序（即所有项目都应该是可拖动的），但我不希望第一个项目之后的任何项目都能够被放在第一个项目之上。

我有这种工作，但没有禁用第一个占位符，当一个项目被删除时，排序被取消：

$(".sortable").sortable({
    beforeStop: function(event, ui) {
        if(ui.placeholder.index() <= 1) {
            $(this).sortable('cancel');
        } else {
            //sort item
        }
    }
});

任何指针都会非常感激。

Answer 1

我找到了解决此问题的方法。您的代码与我的解决方案相距甚远。

我们的想法是使用change选项根据位置显示/隐藏占位符，如果位置是第一个，则取消放置。

代码（jsFiddle here）：

var cancelRequired = false;
$("#sortable1").sortable({
    placeholder: "sortable-placeholder",
    change: function(event, ui) {
        if (ui.placeholder.index() < 1) {
            $(ui.placeholder).css('display', 'none');
        } else {
            $(ui.placeholder).css('display', '');
        }
    },
    beforeStop: function(event, ui) {
        cancelRequired = (ui.placeholder.index() <= 1);
    },
    stop: function() {
        if (cancelRequired) {
            $(this).sortable('cancel');
        }
    }
});

beforeStop和stop中使用的黑客是因为尝试直接在beforeStop内调用取消时的错误而完成的。 {}发送给More info here的this link。

此代码已使用jQuery 1.8.2和jQuery-ui 1.9.2

进行了测试

Answer 2

这是一种更简单的方法，通过这种方式，还原功能也可以。为此，您应该在第一个项目中添加一个类。

HTML：

<ul id="sortable">
    <li class="no_sort sortable_first">First item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ul>

脚本：

$('#sortable').sortable({
    placeholder: 'sortable_placeholder',
    cancel: '.no_sort',
    opacity: 0.5,
    revert: 100,
    change: function(event, ui) {
        if (ui.placeholder.index() < 1) {
            $('.sortable_first').after(ui.placeholder);
        }
    }
});

Fiddle

jQuery sortable禁用第一个占位符

2 个答案: