jsplumb所在div局部缩放后，拖动节点出现偏差

最新推荐文章于 2024-05-02 17:43:39 发布
原创 最新推荐文章于 2024-05-02 17:43:39 发布 · 2.4k 阅读 · 3 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#javascript
本文解决JSPlumb在使用transform:scale进行局部缩放后，拖动节点出现偏差的问题。通过调用jsplumb.setZoom方法并传入缩放倍数，完美解决了拖动偏差。

jsplumb所在div局部缩放后，拖动节点出现偏差

项目中利用了jsplumb进行画拓补图，其中有个功能需要对拓补图进行缩放，利用transform:scale(0.5);和 transform-origin: 0% 0% 实现整个区域缩放，但发现缩放后移动节点时出现偏差，进过一番周折终于发现了这个——setZoom()；
这是jsplumb对缩放后拖动节点进行处理。
在这里插入图片描述

jsplumb.setZoom(tpl_scalingNum);

这里的 tpl_scalingNum为我的scale()缩放倍数；然后问题就完美解决啦。

jsPlumbToolkit工具版本实现的缩放及小地图导航demo
11-27
jsPlumb的官方工具包，去除域名检测，尝试的demo进行缩放拖拽，小地图导航等功能，绝对能用。（ajax获取模板和json数据涉及浏览器安全，需要结合项目运行查看操作节点）
jsPlumb画布缩放
weixin_44208404的博客
11-24 1351
想实现画布缩放，但是激活元素时位置一直不对，然后一行代码解决了。
jsPlumb 有滚动条区域连线 画Dom元素间的连线
Lerlerrr的博客
09-02 1957
使用 jsPlumb 在有滚动条的区域内画线，有滚动条的区域内，连接线会盖过文章，并且不会随着滚动条的滚动一起滚动。
vue项目中使用jsplumb流程图(以及类似官网的放大缩小漫游)
热门推荐
ya_nan_zhang的博客
05-28 1万+
html //jsplumb初始化 jsplumb(_this) { jsPlumb.ready(function() { _this.instance = jsPlumb.getInstance({ Endpoint: ["Dot", { radius: 2, cssClass: "dot" }], //连线 Connector: ['Bezier', { curvines...
基于jsplumb开发厂区设备分布图
搬砖狗-小强的专栏
10-15 1363
随着IT信息技术的发展，工业化和信息化结合的场景越来越多。下面是某公司通过信息化系统动态维护设备开发的案例。 整体效果 设备管理 可以从左侧把需要的设备拖拽到右边的画布，双击可以维护设备的信息以及点位。2个设备之间可以添加连线。 相关代码 $("#flowBox").droppable({ scope: 'ss', drop: function (event, ui) { var $chart = $(ui.draggable[0]); ..
jsPlumb Components Crack
q2315702359的博客
03-09 694
jsPlumb组件是一组可嵌入的组件，可将可视连接快速集成到网页中。jsPlumb组件基于jsPlumb Toolkit库构建，是现代的、符合标准的构建块，可在所有当前浏览器中运行。使用细粒度配置参数控制每个组件的行为，同时提供智能默认值，允许您直接使用每个组件。思维导图生成器-构建和管理思维导图，具有将笔记与地图中的每个节点关联的功能。流程图生成器-构建和管理流程图，具有一系列符号和提供自己的能力。丰富的CSS类允许您轻松地为各种组件进行蒙皮以适合自己。为支持Vue 2，所有组件都添加了包装器。
jsPlumb的学习使用(四):个人总结在开发流程图的思路和API使用
m0_54741495的博客
06-06 2248
之前的文章给大家Api中文文档和英文官网的链接了,希望大家去参考,这里自己写了一个文档,是自己在开发中总结的,并不全面,但是完成自己上一篇的那个图形,绝对是够用了,自己后面也会不断完善,更新的博客里面.这里就不展示代码,上一篇就是完整代码,这里相当于是对上篇文章的代码进行一个解读。
jsplumb多画布绘制流程图异常定位处理
u012743809的博客
09-22 998
2. 直接定义jsplumb绘制,同一个vue组件多次使用,而内部的canvas的id一致,尝试使用不同的canvasId,发现问题并未解决,实际应该相关,修改使用uuid+canvasId。3. 查看绘制界面元素发现问题, 所有绘制的节点的id都是任务的id, 而同一任务在同一个窗口出现多次相当于document上存在了多个相同id元素。在实现编辑与多版本回滚时,发现当同一窗体存在一个jsplumb绘制的画布时,再打开新的画布,绘制的工作流定位异常。3. 绑定事件的id => getRealId(id)
jsplumb dom 位置发生变化，连线错位
weixin_34258078的博客
11-20 7232
4、jsplumb 在 dom 位置发生变化 jsplumb 监听不到，所以连线位置不对。 场景：点击按钮查找parent 的关系，展示parent,相反查找 children, 但是按钮盒子的位置变化了，连线位置没有变化。 本来不打算单独写这个博客的，在bug管理中单独记录了这个问题，但是由于我解决的时间过长，并且在国内搜索不到有效的解决办法，希望小伙伴不要像我这么浪费时间。 因为jsplumb...
jsPlumb点到点连线偏移
yal_888的博客
04-09 3748
1.最近画一个页面，需要在图中“起点”和“终点”中间构建一条连线，选择的工具是jsPlumb。 2.将target和source节点填充后，发现效果不对。终点向下偏移了一些。 3.在浏览器上查看插件生成的代码，可以看到生成的图形区域以及目标点的定位。 4.浏览器里面将top属性该为0，看到如下效果。 5.也就是说这里jsPlumb计算后的位置后，然后相对于当前容器来进行绝对布局的。所有计算出来...
jsplumb缩放后，拖动节点和连接线拖动位置不对
m0_37378152的博客
08-02 2150
缩放后需要调用api调整所有节点和连接线的偏移 jsplumb.setZoom(scale)
html缩放页面导致元素位置变动,javascript-从中心缩放后,将元素保持在原始位置...
weixin_42102220的博客
06-03 1246
所以我想知道如何计算从中心缩放的元素的转换CSS属性值(css：transform-origin：50％50％0).HTML：CSS：#holder {position: absolute;width: 500px;height: 500px;background: #226699;}#dot {position: absolute;left: 100px;top: 100px;width: 5p...
jsplumb 中文基础教程 流程图配置文档
积极的小可爱~的博客
06-15 7377
你有没有想过在你的网站上展示图表或者甚至在浏览器应用程序中使用它？用jsPlumb你可以！它是完全免费的，并根据MIT许可证提供。您可以直接从jsPlumb github网站下载框架。该项目主要由Simon Porritt开发，他在澳大利亚西德尼担任网络开发人员。jsPlumb由他积极开发。作为许多优秀的开发人员，他似乎更喜欢开发代码而不是编写教程，这就是为什么我提供一个简单的入门教程。
jsplumb中文文档
qq_21280835的博客
03-04 1万+
1. jsplumb 中文基础教程 1.1. 什么是jsplumb？ 1.2. jsplumb能干什么？
基于jsplumb开发厂区设备分布图(2)
2401_84447417的博客
05-02 186
i++) {修改})})修改})if (!!});},1000);})// 单点击了连接线,});// 连线});});// 删除连线回调})//添加到组i++) {break;});//从组中删除i++) {break;});//单点击了连接线。
jq实现拖拽功能-解决滚动条引起的偏差
qq_42961150的博客
03-07 1504
最近在做拖拽功能的时候，在网上找了一些示例代码，示例代码都是大同小异，我发现代码并不完整，仅仅实现了拖拽功能，并未考虑到页面有滚动条时候的拖拽，还未考虑到拖出边界后可能会出现的bug。下面来做个简单分析和解决思路
jsplumb节点可拖动,使用拖动和调整大小的jsPlumb问题
weixin_39874366的博客
12-29 1255
I'm using jsPlumb in my project that, basically, build a flowchart, where user can drag and drop a shape from one div to another (#frame).So I want that some shapes are resizable, but I'm having some ...
jsPlumb 踩坑记录
博客
03-03 859
Vue3 中的 jsPlumb 连线错乱问题
turn.js 页面zoom后，翻页位置变动
baidu_34831792的博客
01-05 899
即turn.js中 e.pageX/zoom ,e.pageY/zoom。在翻页这里，需要将原来的e.pageX和e.pageY除以缩放量。页面缩放后需要计算偏移量。
JavaScript实现拖拽和解决部分bug
Tank_in_the_street的博客
10-12 3287
一般来说，实现拖拽的话，拖拽的基本功能是你对某个想要移动的元素进行点击，点击后按住不放进行移动，该元素就会跟着你的鼠标移动，当你把鼠标一松开，则该元素就会定格在那里。一般的实现这个功能要注意两个地方，一是该元素必须是绝对定位，因为绝对定位脱离了文档流，才能够随意的移动；二是如何能够很好的获取移动的坐标，我们获取的坐标是鼠标移动的坐标减去鼠标在该元素距离边框的坐标，比如说我们点击了该元素的中心位置，
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值