Question

我在ul列表中的特定li上禁用排序时出现问题。我正在使用this可排序的js库。

这就是我的ul看起来：

<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，它必须是不可排序的，而且2 li可以是可排序的。这是我的JS：

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

我知道你可以这样做：

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

但我怎么能在我的情况下实现这个呢？

Answer 1

继@BenG评论之后，您需要使用filter代替cancel。

＆＃13;

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

＆＃13;

<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>

＆＃13;

可排序的JS - 禁用特定li的排序

1 个答案: