relation-graph图谱组织架构图在移动端拖动失效解决方法

近期做一个项目,需要用到图谱,引用了relation-graph开源库,由于我的软件界面都是半透明的,发现库的背景默认是白色的,库也没有暴露方法出来修改背景颜色的,于是直接修改libs的dist代码,把默认白色背景给去掉,重新编译完美运行,

正在我高兴的给客户去验收的时候,发现客户在触摸屏设备上,不能拖动节点。在电脑上用鼠标又是正常的,后面我直接下载了源码,经过排查,发生是mousedown事件只有鼠标操作才有回调,在移动端得用另外一个方法touchstart去替代。

关键主要代码如下:

  startDrag(e, positionModel, ondraged,isApp) {
    __ondraged = ondraged
    if (isApp){
      e.clientX=e.changedTouches[0].clientX
      e.clientY=e.changedTouches[0].clientY
    }
    console.log('startDrag:', __tmp_basePosition, e)
    __tmp_positionModel = positionModel
    __start_info.x = __tmp_positionModel.x
    __start_info.y = __tmp_positionModel.y
    __tmp_basePosition.x = parseInt(__tmp_positionModel.x) - e.clientX
    __tmp_basePosition.y = parseInt(__tmp_positionModel.y) - e.clientY
    document.body.addEventListener('mousemove', SeeksRGUtils.onNodeMove)
    document.body.addEventListener('mouseup', SeeksRGUtils.onNodeDragend)
    if (isApp){
      document.body.addEventListener('touchend', SeeksRGUtils.onNodeDragend)
      document.body.addEventListener('touchmove', SeeksRGUtils.onNodeMove)
    }

完整代码下载地址:

relation-graph图谱移动端适配拖动修复代码-Typescript文档类资源-CSDN下载

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值