jQuery可排序禁用第一个占位符。

Question

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

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

我已经做了这样的工作，但是当一个项目被放下时，排序被取消，而不是禁用第一个占位符。

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

非常感谢您的帮助。

- mabuki

Answer 1

我找到了解决这个问题的方法。您的代码与我的解决方案差不多。

思路是使用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和stop中使用的hack是由于直接在beforeStop内部调用cancel时出现错误。 在这里了解更多信息，该链接将我带到此链接。

此代码已经测试过，并与jQuery 1.8.2和jQuery-ui 1.9.2兼容。

- Mordhak

---

我稍微调整了你的代码，添加了一个占位符，当一个项目被拖到第一个项目上方时会出现 - 占位符出现在原来项目所在的位置，因为如果在第一个项目上方放下，则会回到原来的位置。我相信它可以更好地实现，但对我来说已经足够了。fiddle：http://jsfiddle.net/hsx7M/ - mabuki

我使用了你的代码来完成相同的事情，但是针对列表中的最后一项而不是第一项。诀窍是将.index()值与$("#parent").children().length - 1进行比较，以知道您是否在列表中的列表项上。 - vbguyny

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

- Fenistil