antvis/G6

Do you want to work on this issue?

You can request for a bounty in order to promote it!

node:dragleave事件在节点内drag时频繁触发 #5780

Shen120 posted onGitHub

问题描述

打开demo,按住一个节点0.8秒。然后拖拽到另一个节点上移动,就能复现,会频繁触发dragleave

重现链接

https://codesandbox.io/p/devbox/drga-node-sort-m4y5cl

重现步骤

打开demo,按住一个节点0.8秒。然后拖拽到另一个节点上移动,就能复现,会频繁触发dragleave

预期行为

拖出节点时只触发一次

平台

  • 操作系统: Windows
  • 网页浏览器:Chrome
  • G6 版本: 4.8.21

屏幕截图或视频(可选)

ch10004-5-29

No response

补充说明(可选)

No response


@Aarebecca @Yanyan-Wang

posted by Shen120 11 months ago

node:dragleave的问题根源是,在drag到另一个节点上时,并且在节点内快速移动,就会错误的触发dragleave,很慢的移动则是正常现象🔴 ✅✅✅✅✅故此,用用其他方法实现了

stack: [],
onDragEnter(e) {
    const item = e.item;
    if (!this.dragItem || !this.isMouseDown || !item) {
      return
    }
    const self = this;
    const model = item.getModel();
    this.dropItem = item;
    self.graph.setItemState(item, "dragState", true);
    this.clearActiveState(model.id);
  },
clearActiveState(id) {
    const self = this;
    this.timer = setTimeout(() => {
      self.throttleClearActiveState(id, self);
    }, 50)
  },

  throttleClearActiveState: throttle((id, self) => {
    self.stack = Array.from(new Set([...self.stack, id]));
    if (self.stack.length > 1) {
      const prev = self.graph.findById(self.stack[0]);
      self.stack.splice(0, 1);
      if (prev) {
        self.graph.setItemState(prev, "dragState", false);
      }
    }
  }, 50,{
    trailing: true,
    leading: true
  }),
posted by Shen120 11 months ago

Fund this Issue

$0.00
Funded
Only logged in users can fund an issue

Pull requests