当前位置: 首页 > 知识库问答 >
问题:

javascript - antG6画布拖拽问题?

华和悦
2023-07-23

对于antvG6绘制的图来说,我设置了mode格式是drag-canvas,但是当我在控制台将屏幕尺寸调整为ipad,拖拽画布就失效了。如果只是调整页面宽度为ipad的宽度,拖拽仍可以生效。请问该如何解决?
image.png

共有1个答案

司徒俊雄
2023-07-23

因为 antvG6 的拖拽事件是基于 鼠标 实现的,所以只是调整页宽理论上不会失效。但是如果使用移动端模拟器或真机测试就可能失效

好消息是官方也提供了对应的库,不用自己去适配了 @antv/g6-plugin-mobile-events

使用时引入就行:

import G6 from '@antv/g6';import mobileEvents from '@antv/g6-plugin-mobile-events';G6.Plugins.register(mobileEvents);const graph = new G6.Graph({  // 配置项...});graph.use(G6.Plugins.mobileEvents);
参考
antv 官方可视化知识库 (讲得很精,比官网细致不少)
antv 官方语雀(不再更新了,但是之前的文章也很优质)
 类似资料:
  • Sortable 怎么实现 拖拽列 不拖拽行 比如我把 value11 拖拽到 value22 的位置 最后结果如图 拖拽元素和目标元素交换位置 最后结果

  • 本文向大家介绍浅析JavaScript动画模拟拖拽原理,包括了浅析JavaScript动画模拟拖拽原理的使用技巧和注意事项,需要的朋友参考一下 模拟拖拽的原理: x1等于div.offsetLeft y1等于div.offsetTop x2等于ev.clientX(ev表示event事件) y2等于ev.clientY 当我们在方块上按下鼠标的时候,x2-x1即可确定。移动鼠标之后,我们用鼠标当前

  • 功能是切换上面checkbox,生成底下的标签,底下的标签可以拖拽排序。现在的问题是对底下的标签进行拖拽排序之后,上面的checkbox再切换,会对顺序进行重新排列。怎么实现切换上边的checkbox,不对底下的标签产生影响?

  • 在GUI里,拖放是指用户点击一个虚拟的对象,拖动,然后放置到另外一个对象上面的动作。一般情况下,需要调用很多动作和方法,创建很多变量。 拖放能让用户很直观的操作很复杂的逻辑。 一般情况下,我们可以拖放两种东西:数据和图形界面。把一个图像从一个应用拖放到另外一个应用上的实质是操作二进制数据。把一个表格从Firefox上拖放到另外一个位置 的实质是操作一个图形组。 简单的拖放 本例使用了QLineEd

  • 在 GUI 里,拖放是指用户点击一个虚拟的对象,拖动,然后放置到另外一个对象上面的动作。一般情况下,需要调用很多动作和方法,创建很多变量。 拖放能让用户很直观的操作很复杂的逻辑。 一般情况下,我们可以拖放两种东西:数据和图形界面。把一个图像从一个应用拖放到另外一个应用上的实质是操作二进制数据。把一个表格从 Firefox 上拖放到另外一个位置 的实质是操作一个图形组。 简单的拖放 本例使用了 QL

  • 拖放(DnD)是强大的用户界面概念,可以通过鼠标点击轻松复制,重新排序和删除项目。 这允许用户在元素上单击并按住鼠标按钮,将其拖动到另一个位置,然后释放鼠标按钮以将元素放在那里。 要使用传统的HTML4实现拖放功能,开发人员要么必须使用复杂的JavaScript编程,要么使用其他JavaScript框架,如jQuery等。 现在,HTML 5提出了一个拖放(DnD)API,它为浏览器提供了本机Dn