Handle + filter

Drags only initiate from the :: handle. Items marked .no-drag can't be moved at all — their handles are inert.

Movable row 1
Movable row 2
Locked row (filtered out)
Movable row 3
Another locked row

How it was wired

import { Sortable } from '../src/index.ts'

new Sortable(document.getElementById('hf-list'), {
  animation: 150,
  draggable: '.hf-item',
  // `handle` restricts where a drag can START — clicking anywhere
  // else on the row does nothing.
  handle: '.drag-handle',
  // `filter` is a CSS selector for rows that should never be
  // draggable, even from the handle.
  filter: '.no-drag',
  // Block the pointer event on filtered rows so they don't even
  // begin a "chosen" state.
  preventOnFilter: true,
  onFilter: (evt) => {
    console.log('blocked', evt.item)
  },
})

v2 reminder: filter only accepts a CSS selector string in v2. The legacy function form is gone — do any custom checks inside onFilter.