javascript - 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，即它将被忽略为放置目标。

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