自定义拖拽事件

开发者可以通过实现通用拖拽事件来自定义拖拽响应：

1. 设置需要拖拽组件的draggable属性为true，并在onDragStart回调中设置需要传递的数据。
2. 设置接受拖拽组件的allowDrop允许落入的数据类型，在onDrop回调中接收拖拽的数据。

属性

事件

样例

import UTD from '@ohos.data.uniformTypeDescriptor';
import UDC from '@ohos.data.unifiedDataChannel';

const TAG = 'DragTest'

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State texts: Array<String> = []

  build() {
    Row() {
      Column({ space: 20 }) {
        Text(this.message)
          .fontSize(50)
          .draggable(true)
          .onDragStart((event: DragEvent) => {
            console.info(TAG, `拖拽开始 X=${event.getWindowX()} Y=${event.getWindowY()}`)
            // 设置拖拽传递的数据
            let text = new UDC.PlainText()
            text.textContent = this.message
            event.setData(new UDC.UnifiedData(text))
          })
          .onDragEnd((event: DragEvent) => {
            console.info(TAG, `拖拽结束 X=${event.getWindowX()} Y=${event.getWindowY()}`)
          })

        List() {
          ForEach(this.texts, (text: string) => {
            ListItem() {
              Text(text).fontSize(20)
            }
          })
        }
        .width('90%')
        .height('80%')
        .border({ color: Color.Black, width: 1 })
        // 设置支持拖入的数据类型
        .allowDrop([UTD.UniformDataType.PLAIN_TEXT])
        .onDragEnter((event: DragEvent) => {
          console.info(TAG, `拖拽动作进入 X=${event.getWindowX()} Y=${event.getWindowY()}`)
        })
        .onDragMove((event: DragEvent) => {
          console.info(TAG, `拖拽动作移动 X=${event.getWindowX()} Y=${event.getWindowY()}`)
        })
        .onDragLeave((event: DragEvent) => {
          console.info(TAG, `拖拽动作离开 X=${event.getWindowX()} Y=${event.getWindowY()}`)
        })
        .onDrop((event: DragEvent) => {
          try {
            console.info(TAG, `拖拽动作完成 X=${event.getWindowX()} Y=${event.getWindowY()}`)
            let records = event.getData().getRecords()
            let plainText: UDC.PlainText = records[0] as UDC.PlainText
            this.texts.push(plainText.textContent)
          } catch (err) {
            console.info(TAG, `出错了 ${JSON.stringify(err)}`)
          }
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

需要注意的是，在.onDragEnd回调中，试图获取拖拽结束时候的坐标，获取到的是（0， 0），需要在.onDrop回调中，才能拿到正确的坐标。