SortableJS - 禁用特定元素的排序功能

Question

我在使用SortableJS时，发现很难禁用特定的ul中的li排序。

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

其中一个class为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" ).sortable({
    cancel: ".static"
});

我应该如何在SortableJS中实现这个？

- nielsv

---

你是否正在使用jQuery UI sortable？ - epascarello

@epascarello，抱歉了。我已经移除了这个标签。 - nielsv

当你尝试它时会发生什么？我们可以有一个 JSFiddle 吗？ - phenxd

它是“filter”选项 = filter:'.static'， - BenG

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>

- Mosh Feu

---

filter选项可以禁用拖动功能，但是通过将其他元素放在其上方，该元素仍然可以被重新排列。要禁用放置功能，您需要使用此技术，即在onMove事件处理程序中检查related属性：onMove: function (e) { return e.related.className.indexOf('static') === -1; }（这个回答确实满足了原始问题，但为了更好地解决一个密切相关的问题，做了一些补充。为了后代记录。） - Bob Stein

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>

- noChance

---

这个很好用，但是当组中没有元素时，就无法将其他组的元素移动到它。 - Jan