4

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

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

我有这种工作，但不是禁用第一个占位符，而是在删除项目时取消排序：

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

任何指针将不胜感激。

4

2 回答 2

7

我找到了解决这个问题的方法。你的代码离我的解决方案不远。

这个想法是使用change选项来根据其位置显示/隐藏占位符，如果位置是第一个则取消删除。

代码（此处为 jsFiddle）：

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并完成了黑客攻击。更多信息在这里发送我到这个链接。stopbeforeStop

此代码已使用 jQuery 1.8.2 和 jQuery-ui 1.9.2 进行测试

于 2012-12-14T16:27:09.403 回答
4

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

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

小提琴

于 2014-06-26T20:40:34.280 回答