如何使用 ArkUI 构建拖放功能？

Question

讲解 ArkUI 提供的拖放 API 和交互实现。

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

在 ArkUI 中，拖放功能可以通过 Drag 和 Drop API 实现。下面是一个简单的示例：

1. 设置拖动源（DragSource）：
   使用 DragSource 组件，定义可以被拖动的对象，并将其与拖放操作绑定。

import { DragSource, DropTarget } from '@ohos/ui/drag';

export default {
  render() {
    return (
      <DragSource onDragStart={this.handleDragStart}>
        <Text>Drag Me</Text>
      </DragSource>
    );
  },
  methods: {
    handleDragStart(event) {
      // 设置拖动的数据，包含目标的标识符等信息
      event.dataTransfer.setData('text', 'Dragged Content');
    }
  }
};

2. 设置目标区域（DropTarget）：
   使用 DropTarget 组件接收被拖动的元素，并实现拖放时的响应行为。

export default {
  render() {
    return (
      <DropTarget onDrop={this.handleDrop}>
        <Text>Drop Here</Text>
      </DropTarget>
    );
  },
  methods: {
    handleDrop(event) {
      const droppedData = event.dataTransfer.getData('text');
      console.log('Dropped content:', droppedData);
    }
  }
};

注意事项：

• 在拖动过程中，可以使用 onDragOver 事件来阻止默认行为，使目标区域允许放置。
• 可以通过 event.dataTransfer 来存取拖动的数据，并传递给目标区域。