如下代码。我将testBox 放在testBoxGroup 中,然后设置testBoxGroup 允许拖放,我尝试将testBoxGroup 拖放到group stage元素中,由stage元素监听拖放事件并打印日志,发现这个事件时灵时不灵的,有时候触发有时候不触发。但是我空拖则稳定触发。
// #监听单个事件
import {Box, DragEvent, DropEvent, Ellipse, Group, Leafer, PointerEvent, Rect} from "leafer";
const leafer = new Leafer({ view: window })
const testBox = new Rect({
x: 100, y: 100,
width: 30,
height: 20,
fill: {
type: 'linear',
stops: [
{offset: 0, color: '#606060'},
{offset: 0.5, color: '#B0B0B0'},
{offset: 1, color: '#606060'}
]
},
strokeWidth: 1,
stroke: '#1B1B1B'
});
const testBoxGroup = new Group({
draggable: true,
children: [testBox]
})
const innerBox = new Ellipse({
width: 80,
height: 80,
fill: 'black',
stroke: 'none'
})
const stage = new Group({
children: [innerBox]
})
stage.on(DropEvent.DROP, () => {
console.log("Drop");
})
stage.on(DragEvent.ENTER, () => {
console.log('Enter')
})
stage.on(DragEvent.LEAVE, () => {
console.log('LEAVE')
})
const box = new Box({
width: 100,
height: 100,
fill: 'red',
children: [stage]
})
box.on(PointerEvent.TAP, () => {
console.log("Pointer");
})
const group = new Group({
children: [box]
})
leafer.add(group)
leafer.add(testBoxGroup)
如下代码。我将testBox 放在testBoxGroup 中,然后设置testBoxGroup 允许拖放,我尝试将testBoxGroup 拖放到group stage元素中,由stage元素监听拖放事件并打印日志,发现这个事件时灵时不灵的,有时候触发有时候不触发。但是我空拖则稳定触发。