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

拖拽的时候元素没有动,但是缩放或者滚动一下画布,元素又按照刚才拖动的动作变换了位置

Open webYuchangxu opened this issue 3 months ago • 1 comments

现象如下:

Image

示例代码如下:

import { App, Leafer, Frame,Box } from 'leafer-ui'

const app = new App({
    view: window,
    tree: { type: 'viewport' }, // 添加基础视口
    zoom: {
        min: 0.1, // 视图缩放范围
        max: 10,
    },
    move: {
        holdSpaceKey: true, // 按住空白键拖拽可平移视图
        holdMiddleKey: true, // 按住滚轮中键拖拽可平移视图
    },
})

const taskListLeafer = new Leafer({})
app.tree.add(taskListLeafer)

const taskBox = new Frame({
    width: 400,
    height: 100,
    fill: '#eee',
    x: 0,
    y: 0,
    children: [
        {
            tag: 'Text',
            text: '12312',
            fill: 'black',
            textAlign: 'center',
            verticalAlign: 'middle',
        },
    ],
})

const cell = new Box({
    x: 10,
    y: 0,
    width: 80,
    height: 30,
    fill: '#1890FF',
    cornerRadius: 5,
    dragBounds: 'parent', // 限制元素拖动范围
    draggable: 'y',
})

taskListLeafer.add(taskBox)
taskBox.add(cell)

webYuchangxu avatar Oct 12 '25 08:10 webYuchangxu

App的结构有问题导致的,具体看一下注释代码:

import { App, Frame,Box } from 'leafer-ui'
import '@leafer-in/viewport'

const app = new App({
    view: window,
    tree: { type: 'viewport' },
    zoom: {
        min: 0.1, // 视图缩放范围
        max: 10,
    },
    move: {
        holdSpaceKey: true, 
        holdMiddleKey: true, 
    },
})

// 这里有问题,Leafer实例不能添加给app.tree,具体看一下App的文档和示例
// const taskListLeafer = new Leafer({})
// app.tree.add(taskListLeafer)
const taskListLeafer = app.tree

const taskBox = new Frame({
    width: 400,
    height: 100,
    fill: '#eee',
    x: 0,
    y: 0,
    children: [
        {
            tag: 'Text',
            text: '12312',
            fill: 'black',
            textAlign: 'center',
            verticalAlign: 'middle',
        },
    ],
})

const cell = new Box({
    x: 10,
    y: 0,
    width: 80,
    height: 30,
    fill: '#1890FF',
    cornerRadius: 5,
    dragBounds: 'parent', 
    draggable: 'y',
})

taskListLeafer.add(taskBox)
taskBox.add(cell)

leaferjs avatar Oct 12 '25 10:10 leaferjs