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

[BUG]:元素从group拖出来,出现了跳动

Open jsjjhouwei opened this issue 9 months ago • 1 comments

// #监听拖放事件 import { Leafer, Group, Rect, DropEvent, DragEvent } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const group = new Group({ x: 300, y: 300 }) const rect = new Rect({ fill: 'blue' }) const rect2 = new Rect({ fill: 'green', draggable: true })

leafer.add(rect2) leafer.add(group) group.add(rect)

group.on(DragEvent.ENTER, function () {
DragEvent.setData({ data: 'drop data' }) rect.set({ stroke: 'black', strokeWidth: 2 }) })

group.on(DragEvent.LEAVE, function () { rect.set({ stroke: '' }) })

// ====== 有问题的代码逻辑 start ====== group.on(DragEvent.OUT, function () { // 拖出去的逻辑有问题,会跳动,dropTo理论上将元素拖拽放置到另一个父容器中,会同时保持在世界坐标中的显示位置不变 rect2.dropTo(leafer) }) // ===== 有问题的代码逻辑 end =====

group.on(DropEvent.DROP, function (e: DropEvent) { console.log(e.data) e.list.forEach((leaf) => { leaf.dropTo(group) // 放置元素到group中 }) }) 问题复现代码

jsjjhouwei avatar Apr 01 '25 10:04 jsjjhouwei

拖拽结束的时候再dropTo, 拖拽过程直接替换父元素是会有问题的,目前还不太好优化,等以后有时间再优化

leaferjs avatar Apr 02 '25 13:04 leaferjs