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

SortableJS - Disable sort on a specific element

本文关键字：元素 排序 SortableJS      更新时间：2023-09-26

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

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

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

我知道你可以在jQuery UI中做到这一点，可以像这样排序：

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

如何在 SortableJS 中执行此操作？

此外，@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>

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

相关文章：