DragEvent ​

拖动事件。

事件名称 ​

DragEvent.START ​

开始拖动事件

drag.start

DragEvent.DRAG ​

拖动事件中

drag

DragEvent.END ​

结束拖动事件

drag.end

状态事件 ​

拖动中途径的元素触发，可配合 DropEvent 实现 drop 前的 移入移出效果。

DragEvent.OVER ​

拖动元素 over。

drag.over

DragEvent.OUT ​

拖动元素 out。

drag.out

DragEvent.ENTER ​

拖动元素进入。

drag.enter

DragEvent.LEAVE ​

拖动元素离开。

drag.leave

关键属性 ​

moveX: number ​

拖动事件偏移的 X 轴距离（世界坐标）

moveY: number ​

拖动事件偏移的 Y 轴距离（世界坐标）

totalX: number ​

本轮拖动事件偏移的 X 轴总距离（世界坐标）

totalY: number ​

本轮拖动事件偏移的 Y 轴总距离（世界坐标）

坐标转换方法 ​

移动距离 ​

moveX, moveY 属性的坐标转换。

getPageMove ( ): IPointData ​

获取在 page 坐标系中的偏移距离。

getInnerMove ( relative?: UI): IPointData ​

获取相对于 relative 内部坐标 的偏移距离，relative 不存在时为当前侦听元素。

getLocalMove ( relative: UI): IPointData ​

获取相对于 relative 本地坐标 的偏移距离，relative 不存在时为当前侦听元素。

移动总距离 ​

totalX, totalY 属性的坐标转换。

getPageTotal ( ): IPointData ​

获取在 page 坐标系中的总偏移距离。

getInnerTotal ( relative?: UI): IPointData ​

获取相对于 relative 内部坐标 的总偏移距离，relative 不存在时为当前侦听元素。

getLocalTotal ( relative: UI): IPointData ​

获取相对于 relative 本地坐标 的总偏移距离，relative 不存在时为当前侦听元素。

静态方法 ​

DragEvent.setList ( list: ILeaf |ILeaf[] | ILeafList ) ​

另外设置拖拽的对象列表（会跟随鼠标移动），drop 事件触发后自动重置。

DragEvent.setData ( data: IObject ) ​

设置拖拽数据，drop 事件触发后自动重置。

继承 ​

PointerEvent ​

API ​

DragEvent ​

示例 ​

手动拖拽元素 ​

默认 drggable 为 true 或 DragEvent.setList() 的元素会自动拖拽。

import { Leafer, Rect, DragEvent } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({ x: 200, y: 100, fill: '#32cd79' })

leafer.rotation = 30
leafer.add(rect)

rect.on(DragEvent.DRAG, function (e: DragEvent) {  
    e.current.moveWorld(e.moveX, e.moveY)
})

检查元素是否正在被拖拽 ​

leafer.interaction.isDrag(leaf)

画笔工具 ​

按下鼠标拖动开始画线， 可以缩放平移画面

import { Leafer, DragEvent, Pen } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const pen = new Pen()
leafer.add(pen)

leafer.on(DragEvent.START, (e: DragEvent) => {
    const inner = e.getInner(pen)
    pen.setStyle({ stroke: 'black', strokeWidth: 10, strokeCap: 'round', strokeJoin: 'round' })
    pen.moveTo(inner.x, inner.y)
})

leafer.on(DragEvent.DRAG, (e: DragEvent) => {
    const inner = e.getInner(pen)
    pen.lineTo(inner.x, inner.y)
    pen.paint()
})