如何在ReactSortable/SortableJS中锁定或禁用指定拖拽项？

完全可以实现，你可以通过配置filter和draggable属性来排除最后一个输入框，具体方案如下：

针对ReactSortable的解决方案 #

在ReactSortable组件上添加三个关键属性，精准控制可拖拽元素范围：

• draggable=".tag"：仅允许带有.tag类的元素被拖拽
• filter=".input"：排除带有.input类的输入框，使其不参与拖拽逻辑
• preventOnFilter={true}：确保被过滤的元素不会触发任何拖拽相关事件

修改后的代码如下：

<ReactSortable
    className={'list'}
    list={this.state.list}
    setList={this.handleSortChange.bind(this)}
    draggable=".tag"
    filter=".input"
    preventOnFilter={true}
>
    <div className={'tag'}>1st tag</div>
    <div className={'tag'}>2nd tag</div>
    <div className={'tag'}>etc..</div>
    <input
        placeholder="Add tag"
        className={'input'}
    />
</ReactSortable>

原生SortableJS的配置思路（如果直接使用） #

如果你是直接初始化Sortable实例，配置逻辑完全一致：

Sortable.create(document.querySelector('.list'), {
    draggable: '.tag',
    filter: '.input',
    preventOnFilter: true,
    // 其他原有配置
});

这样设置后，输入框会保持在原位置，既不能被拖拽，也不会成为其他拖拽元素的放置目标，完全满足你的样式和功能需求。

内容的提问来源于stack exchange，提问作者Arno van Oordt