javascript - SortableJS - 禁用对特定元素的排序

Question

我很难在我的 ul 中禁用对特定 li 的排序。我正在使用 SortableJS .

<ul id="items">
    <li class="static">
        <div class="image"><img src="image.jpg" /></div>
        <div class="text">Static</div>
        <div class="clearboth"></div>
    </li>
    <li>
        <div class="image"><img src="image.jpg" /></div>
        <div class="text">Dynamic</div>
        <div class="clearboth"></div>
    </li>
    <li>
        <div class="image"><img src="image.jpg" /></div>
        <div class="text">Dynamic</div>
        <div class="clearboth"></div>
    </li>
</ul>

一个 li 类 static 不应该是可排序的。其他的应该是可排序的。

var el = document.getElementById('items');

var sortable = new Sortable(el, {
    onUpdate: function (evt) {
        var itemEl = evt.item;

        // here happens some stuff
    },
    filter: '.js-remove',
    onFilter: function (evt) {
        // here happens some stuff
    }
});

我know你可以在 jQuery UI sortable 中完成像这样:

$( ".sortable" ).sortable({
    cancel: ".static"
});

我如何在 SortableJS 中执行此操作？

Answer 1

进一步@BenG评论，你需要使用filter而不是 cancel。

var el = document.getElementById('items');
var sortable = Sortable.create(el, {
   filter: ".static"
});

<script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js"></script>
<link href="http://rubaxa.github.io/Sortable/st/app.css" rel="stylesheet" />
<ul id="items" class="block__list block__list_words">
    <li>item 1</li>
    <li class="static">item 2</li>
    <li>item 3</li>
</ul>