Pragmatic-DnD（或称为 Pragmatic Drag and Drop）是一个轻量级、简单易用的拖拽库，旨在为开发者提供一个方便的 API 来实现拖拽功能。它特别适合需要快速实现基本拖拽交互的应用程序。

特点：

1. 轻量化： 是一个非常轻量级的库，没有复杂的依赖，适合快速集成。
2. 易于使用：API 简单且直观，降低了学习曲线。
3. 不依赖框架：它是纯 JavaScript 库，可以与任何前端框架一起使用，或者独立在纯 HTML/CSS 页面上使用。
4. 高度可定制：虽然是轻量级的，但仍提供了一些定制选项，可以根据需要调整拖拽的行为。

主要功能：

• 支持拖拽排序：可以用来在列表中拖动元素并重新排序。
• 自定义拖拽效果：可以根据需要自定义拖拽的样式和动画。
• 拖拽回调：在拖拽事件触发时，你可以通过回调函数来执行额外的逻辑。

安装

npm install pragmatic-dnd

配置选项

• onDragStart: 在拖拽开始时触发，通常用于做一些标记或状态改变。
• onDragEnd: 在拖拽结束时触发，可以用来更新列表顺序或执行其他操作。
• disabled: 如果设置为 true，将禁用拖拽功能。
• animationDuration: 配置拖拽时的动画持续时间，单位为毫秒。
• handle: 指定拖拽的“把手”元素，用户必须拖拽这个元素才能开始拖拽。

适用场景

• 列表排序：当你需要在一个列表中实现拖动排序功能时，Pragmatic-DnD是一个非常合适的选择。
• 文件管理器：当你需要在界面中实现文件的拖拽排序、移动等功能时，也可以使用这个库。
• 自定义布局：你可以用它来实现可拖拽的布局组件或动态调整界面元素的功能。

<ul id="sortable-list">
  <li id="item1" class="draggable">
    <span class="handle">☰</span> 项目 1
  </li>
  <li id="item2" class="draggable">
    <span class="handle">☰</span> 项目 2
  </li>
  <li id="item3" class="draggable">
    <span class="handle">☰</span> 项目 3
  </li>
  <li id="item4" class="draggable">
    <span class="handle">☰</span> 项目 4
  </li>
</ul>

<script>
  const list = document.getElementById('sortable-list');

  new PragmaticDnD(list, {
    handle: '.handle',
    onDragStart: function(event) {
      console.log('开始拖拽:', event.target);
    },
    onDragEnd: function(event) {
      console.log('拖拽结束:', event.target);
    }
  });
</script>