DragEvent

拖动事件。

继承

DragEvent  >  PointerEvent  >  UIEvent  >  Event

script 标签引入 需用别名 MyDragEvent 代替。

事件名称

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 元素不存在时为当前侦听元素。

拖拽区域

getPageBounds ( ): IBoundsData

获取事件在 page 坐标系中形成的拖拽区域，可用于快速 创建图形。

静态方法

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

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

DragEvent.setData ( data: IObject )

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

示例

手动拖拽元素

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

simple.ts

// #监听拖拽事件
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)
})

simple.js

// #监听拖拽事件
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) {
    e.current.moveWorld(e.moveX, e.moveY)
})

检查元素是否正在被拖拽

leafer.interaction.isDrag(leaf)

画笔工具

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

draw.ts

// #画笔工具示例
import { Leafer, DragEvent, Pen } from 'leafer-ui'
import '@leafer-in/viewport'

const leafer = new Leafer({ view: window, type: 'design', fill: '#333', })

leafer.add({ tag: 'Text', x: 100, y: 100, text: '按下鼠标拖动开始画线，抬起结束', fill: '#999', fontSize: 16 })

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

// 按下鼠标拖动开始画线，抬起结束，当缩放平移视图后，仍然可以准确绘制新的线条
leafer.on(DragEvent.START, (e: DragEvent) => {
    const point = e.getPagePoint() // 转换事件为 page 坐标 = pen.getPagePoint(e)  //
    pen.setStyle({ stroke: '#32cd79', strokeWidth: 10, strokeCap: 'round', strokeJoin: 'round' })
    pen.moveTo(point.x, point.y)
})

leafer.on(DragEvent.DRAG, (e: DragEvent) => {
    const point = e.getPagePoint() // 转换事件为 page 坐标 = pen.getPagePoint(e)  //
    pen.lineTo(point.x, point.y)
})

draw.js

// #画笔工具示例
import { Leafer, DragEvent, Pen } from 'leafer-ui'
import '@leafer-in/viewport'

const leafer = new Leafer({ view: window, type: 'design', fill: '#333', })

leafer.add({ tag: 'Text', x: 100, y: 100, text: '按下鼠标拖动开始画线，抬起结束', fill: '#999', fontSize: 16 })

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

// 按下鼠标拖动开始画线，抬起结束，当缩放平移视图后，仍然可以准确绘制新的线条
leafer.on(DragEvent.START, (e) => {
    const inner = e.getPagePoint() // 转换事件为 page 坐标 = pen.getPagePoint(e)  //
    pen.setStyle({ stroke: '#32cd79', strokeWidth: 10, strokeCap: 'round', strokeJoin: 'round' })
    pen.moveTo(inner.x, inner.y)
})

leafer.on(DragEvent.DRAG, (e) => {
    const inner = e.getPagePoint() // 转换事件为 page 坐标 = pen.getPagePoint(e)  //
    pen.lineTo(inner.x, inner.y)
})