leafer-ui icon indicating copy to clipboard operation
leafer-ui copied to clipboard

拖放问题,鼠标放在Box的文本上拖动元素到Frame中无法触发DROP事件

Open Makero opened this issue 11 months ago • 1 comments

环境:电脑 + 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)

Makero avatar Feb 07 '25 14:02 Makero

收到,谢谢反馈~

leaferjs avatar Feb 08 '25 01:02 leaferjs