DropEvent
拖放事件。
事件名称
DropEvent.ENTER
拖动对象进入
drop.enter
DropEvent.LEAVE
拖动对象离开
drop.leave
DropEvent.DROP
放置对象
drop
关键属性
list: ILeafList
待放置的对象列表，默认为当前正在触发拖动事件的对象列表。
data?: IObject
自定义数据。
静态方法
DropEvent.setList(list: ILeaf | ILeaf[] | ILeafList)
设置将要放置的对象列表，drop 事件触发后自动重置。
DropEvent.setData(data: IObject)
设置自定义数据，drop 事件触发后自动重置。
示例
ts
import { Leafer, Group, Rect, DropEvent, LeafHelper } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const dragRect = new Rect({ x: 200, y: 100, fill: '#32cd79', draggable: true })
const group = new Group({ x: 300, y: 300 })
const rect = new Rect({ fill: 'blue' })
leafer.add(dragRect)
leafer.add(group)
group.add(rect)
group.on(DropEvent.ENTER, function () {
//DropEvent.setList(dragRect)
DropEvent.setData({ data: 'drop data' })
rect.set({ stroke: 'black', strokeWidth: 2 })
})
group.on(DropEvent.LEAVE, function () {
rect.set({ stroke: '' })
})
group.on(DropEvent.DROP, function (e: DropEvent) {
console.log(e.data)
e.list.forEach((leaf) => {
LeafHelper.drop(leaf, group)
})
})