SortableJS固定不可拖动的项目

Question

我有一个使用SortableJS创建的列表，其中有一些项目无法拖放。以下是它的外观示例：

<ul id="user_selections">
<li class="no_drag">Fixed</li>
<li>Item 1</li>
<li class="no_drag">Fixed</li>
<li>Item 2</li>
<li class="no_drag">Fixed</li>
<li>Item 3</li>
<li class="no_drag">Fixed</li>
</ul>

类no_drag是固定的项。

现在，当我将项目3移动到项目1之上时，结构应该是这样的：

<ul id="user_selections">
<li class="no_drag">Fixed</li>
<li>Item 3</li>
<li class="no_drag">Fixed</li>
<li>Item 1</li>
<li class="no_drag">Fixed</li>
<li>Item 2</li>
<li class="no_drag">Fixed</li>
</ul>

有谁能帮我做这种事吗。

这是我尝试过的JS代码：

var el = document.getElementById('user_selections');
if (el) {
const sortable = Sortable.create(el, {
filter: '.no_drag',
onMove(evt, oe) {
return evt.related.className.indexOf('no_drag') === -1;
},
preventOnFilter: false,
onEnd: function(/**Event*/evt) {
// Some ajax call to save the new indexes
}
});
}

Answer 1

我找到了一个适用于第一个和最后一个元素的解决方案。在选项中添加此项：

onMove: function(e) {
if(e.related.classList.contains('no_drag')) {
return false;
}
},

如果放置目标是你不想移动的东西，它将返回false，即它将被忽略为放置目标。

中间的元素也将被忽略，但您仍然可以在它们之后(或之前(定位元素，因此它们将被移动。