拖拽排序从原生到实现

网上关于这个的资料不少，但很多都只讲原理不给代码。这里补一个完整的可运行示例，亲测有效。

先搞清楚原理

要理解拖拽排序，先得搞清楚渲染性能优化这个机制。直接看代码比看文字描述来得快：

class StorageManager {
  #storage = window.localStorage;
  #prefix = 'app_28';

  get(key, defaultValue = null) {
    const raw = this.#storage.getItem(`${this.#prefix}:${key}`);
    if (raw === null) return defaultValue;
    try { return JSON.parse(raw); } catch { return raw; }
  }

  set(key, value) {
    this.#storage.setItem(`${this.#prefix}:${key}`, JSON.stringify(value));
  }

  remove(key) { this.#storage.removeItem(`${this.#prefix}:${key}`); }

  clear() {
    Object.keys(this.#storage)
      .filter(k => k.startsWith(`${this.#prefix}:`))
      .forEach(k => this.#storage.removeItem(k));
  }
}

实际怎么用

写代码的时候，拖拽排序有几个常见写法。推荐用下面这种方式，代码更清晰，也更容易维护：

function createStore(reducer, initialState) {
  let state = initialState;
  let listeners = [];
  function getState() { return state; }
  function dispatch(action) {
    state = reducer(state, action);
    listeners.forEach(l => l(state));
  }
  function subscribe(listener) {
    listeners.push(listener);
    return () => { listeners = listeners.filter(l => l !== listener); };
  }
  return { getState, dispatch, subscribe };
}

function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT': return { count: state.count + 1 };
    case 'DECREMENT': return { count: state.count - 1 };
    case 'SET': return { count: action.payload };
    default: return state;
  }
}

const store = createStore(counterReducer);
store.subscribe(s => console.log('State:', s));
store.dispatch({ type: 'INCREMENT' });

进阶一点的用法

拖拽排序在复杂场景下的用法和简单场景差别挺大。主要是渲染性能优化这块需要额外处理，代码如下：

容易踩的坑

踩坑经验分享：拖拽排序在渲染性能优化方面有几个暗坑。最常见的是参数默认值不符合预期，其次是并发场景下的竞态条件。建议加上防御性检查。

写在最后

拖拽排序这块先整理到这里。兼容性处理是最重要的部分，务必理解透彻。如果遇到问题，先检查配置和版本，大部分报错都是这两个原因。