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 和 class 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 you can do it in 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>

Answer 2

正如 Bob Stein 在评论中提到的那样：

您需要同时添加：

filter: 'selector'属性
onMove: function (e) { return e.related.className.indexOf('static') === -1; }回调监听函数

完全防止元素在列表的开头或结尾重新排列。

使用多个可排序实例：
如果您有多个列表，您可以从中交换元素，您可以将相同的代码添加到可排序实例。这是因为从另一个可排序实例拖动的元素不会调用要添加的可排序实例的回调函数，而是调用其源可排序实例的回调函数。请参阅下面的示例：

var el = document.getElementById('items');
var sortable = Sortable.create(el, {
   filter: ".static",
   group: {
     name: 'list'
   },
   onMove(e) {
     return e.related.className.indexOf('static') === -1;          
   }
});
var items2 = document.getElementById('items2');
var sortable = Sortable.create(items2, {
   filter: ".static",
   group: {
     name: 'list'
   },
   onMove(e) {
     return e.related.className.indexOf('static') === -1;          
   }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/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 class="static">FRUITS</li>
    <li>Strawberry</li>
    <li>Banana</li>
    <li>Peach</li>
</ul><ul id="items2" class="block__list block__list_words">
    <li class="static">COMPANIES</li>
    <li>Microsoft</li>
    <li>Apple</li>
    <li>Intel</li>
</ul>

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

SortableJS - Disable sort on a specific element

javascript

jquery