Pragmatic Drag and Drop 中如何传递自定义拖拽参数

在实现拖拽交互功能时，开发者经常需要传递自定义数据或参数。Pragmatic Drag and Drop 库提供了灵活的数据传递机制，使开发者能够轻松地在拖拽过程中携带和访问自定义数据。

数据传递的核心机制

Pragmatic Drag and Drop 通过两种主要方式支持数据传递：

1. 元素适配器：专门用于处理 HTML 元素的拖拽场景
2. 数据存取方法：提供 getInitialData() 和 getData() 方法用于数据管理

实现数据传递的具体方法

1. 在可拖拽元素上设置初始数据

使用 getInitialData() 方法可以在拖拽开始时为元素附加自定义数据：

const draggable = makeDraggable({
  element: document.getElementById('drag-item'),
  getInitialData: () => ({
    customParam: '自定义参数值',
    elementType: 'special-item'
  })
});

2. 在放置目标上获取数据

在放置目标处，可以通过 getData() 方法访问这些数据：

const dropTarget = makeDropTarget({
  element: document.getElementById('drop-zone'),
  getData: ({ source }) => {
    const data = source.getData();
    console.log(data.customParam); // 输出: "自定义参数值"
    console.log(data.elementType); // 输出: "special-item"
  }
});

实际应用场景

这种数据传递机制特别适用于以下场景：

1. 列表重排序：携带项目ID和位置信息
2. 看板系统：传递任务状态和优先级
3. 表单构建器：携带组件类型和配置参数
4. 文件管理器：传递文件元数据和权限信息

注意事项

1. 传递的数据应当尽量轻量，避免包含大型对象
2. 敏感数据不应通过这种方式传递
3. 数据类型应保持简单（字符串、数字等）
4. 考虑添加类型检查以确保数据完整性

通过合理使用这些数据传递机制，开发者可以构建出功能丰富且响应灵敏的拖拽交互界面。