leafer-ui
leafer-ui copied to clipboard
拖放问题,鼠标放在Box的文本上拖动元素到Frame中无法触发DROP事件
环境:电脑 + window 11 + chrome 132 + leaferjs 1.4.0 复现:拖动矩形到容器里可以触发Frame的DropEvent.DROP事件,但是鼠标放在文本上再拖动到容器里就不触发DROP事件了 代码:
import { App, Box, Frame, DropEvent, Group } from 'leafer-editor'
const app = new App({ view: window, editor: {} })
const appContainer = new Group()
app.tree.add(appContainer)
app.on(DropEvent.DROP, (e: DropEvent) => {
console.log('drop app', e.list);
e.list.forEach((leaf) => {
leaf.dropTo(appContainer)
})
})
const container = new Frame({
width: 420, height: 600, overflow: 'show', fill: '#fff', stroke: '#000',
strokeWidth: 0, editable: true, around: 'center', shadow: {x: 0, y: 0, blur: 4, color: '#999999aa'},
children: [
{ x: -10, y: -30, tag: 'Text', text: '容器', padding: [10, 10], textAlign: 'left', fill: '#fff', verticalAlign:'top', event: {
[DropEvent.DROP]: (e: DropEvent) => {
e.stop()
}
} }
],
event: {
[DropEvent.DROP]: (e: DropEvent) => {
console.log('drop container', e.list);
e.list.forEach((leaf) => {
leaf.dropTo(e.current)
})
e.stop()
}
}
})
const box = new Box({ width: 120, height: 80, overflow: 'show', around: 'center',
resizeChildren: true, textBox: true, fill: '#fff', stroke: '#000', strokeWidth: 2, editable: true,
children: [
{ x: 0, y: 0, width: 120, height: 80, tag: 'Text', text: '文档', fill: 'black', padding: [10, 10], textAlign: 'center', verticalAlign:'middle' }
]
})
appContainer.add(container)
appContainer.add(box)
收到,谢谢反馈~