Lock or disable item in ReactSortable or SortableJS

Question

Is there a way to lock or disable an item in ReactSortable / SortableJS? I want the last item (input in this case) to not be part of the draggable items.

In principle the code looks something like this:

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

    />
</ReactSortable>

Putting the last item outside the ReactSortable is not really an option since it needs style-wise to be in the same flex-wrap parent as the other items.

Answer 1

Turns out it's perfectly possible but you need to combine a couple of attributes to make it fully functional:

• Use filter to prevent the item from being draggable itself.
• Use preventOnFilter={false} from disabling the input itself
• use onMove callback to prevent other items from dragging over or past the input field

Here is an example

<ReactSortable
    className={'list'}
    list={this.state.list}
    setList={this.handleSortChange.bind(this)}
    filter={'.locked_item'}
    preventOnFilter={false}
    onMove={(evt) => (!evt.related.classList.contains('locked_item')) }
>
    <div className={'tag'}>1st tag</div>
    <div className={'tag'}>2nd tag</div>
    <div className={'tag'}>etc..</div>
    <input
        placeholder="Add tag"
        className={'input'}

    />
</ReactSortable>