jQuery sortable禁用第一个占位符

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而使用的hack 和.更多信息请将我发送到此链接.stopbeforeStop

此代码已使用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);
        }
    }
});

小提琴