JsPlumb在react的使用方法及介绍

一．相关资料来源：

1.https://bitqiang.gitbooks.io/jsplumb/content/Chapter1_IMPORTS_AND_SETUP/ ——— 一个翻译一半就不能打开的文档

2.https://github.com/wangduanduan/jsplumb-chinese-tutorial ——— 一个事件方法很全的网站（推荐）

3.https://wdd.js.org/jsplumb-chinese-tutorial/#/ ——— 一个事件方法很全的网站（同上）

4.https://www.cnblogs.com/Bryran/p/3950122.html ————— jq ui 拖动

二．引用库：

版本：2.13.3

库：https://github.com/jsplumb/jsplumb

链接：https://pan.baidu.com/s/1EvftCI5gXRvoL6pNRenSpQ

提取码：z2t4

React vue : npm i jsplumb

注意：低版本需要引用jq 以及jq-ui，此版本不需要

三．在React使用方法：

在我的react项目中，分菜单栏和画布，菜单栏是可拖动子菜单，将菜单拖到画布上，在画布上进行对子菜单项目的操作，大概是这样：
在使用过程中，应为拖动事件，和画图事件都是要先有dom节点,所以，一定要有节点的时候再注册相应的监听事件：

a. React项目中要在 componentDidMount() 生命周期后开始操作，因为是单页面应用，要保证当前页面渲染完成后注册jsplumb实例，离开后要销毁实例所以

let idePageJsPlumstance=’’;

//初始化

componentDidMount() {

        idePageJsPlumstance = jsPlumb.getInstance() //关键函数 注册jsplumb实例

        idePageJsPlumstance.setContainer ('flow-main')//设置面板

    },

    //离开

    componentWillUnmount() {

        if (idePageJsPlumstance) {

            idePageJsPlumstance.clear() //清空

        }

},

b. 在左侧子菜单渲染完后要注册拖拽事件，这里用的是jq ui 拖动不熟悉的可以搜下jq ui 这里这样写的：

//给span注册拖动事件

$('#flow-btns').find('span').draggable({

                helper: 'clone',//拖动样式

                zIndex: 11,

                scope: 'flowMainCanvas',//关键参数

            })

Scope //关键参数，被拖动子菜单和拖动到面板要对应相同

c. 在面板中，要获取位置生成新的dom 对新dom注册事件, （此处以简写，具体方式根据实际项目来做）

//样式

let endAllPointStyle={

        endpoint: 'Dot', //端点的形状

        isSource: true, //是否可以拖动（作为连线起点）

        isTarget: true, //是否可以放置（连线终点）

}
//画图

$('#flow-main').droppable ({

      scope: 'flowMainCanvas',

      drop: function ( event, ui ) {

        let left = parseInt ( ui.offset.left)

        let top = parseInt ( ui.offset.top)

        let id = ‘node12’

        let dom = “<span id=’+id+’ >’+ui.helper.context.dataset.text+’</span>”

        $ (this).append (dom)

        dom.css ('left', left).css ('top', top)

        idePageJsPlumstance.addEndpoint ( id, {

          anchor:"LeftMiddle"

        }, endAllPointStyle)

        //注册端点拖桶

        idePageJsPlumstance.draggable ( id)

        //注册节点拖动

        $ ('#' + id).draggable ({

             containment:"parent",

       })

}

})

d. 同时要对线做一些事件，这里有

//连接线的右键单击事件

 idePageJsPlumstance.bind ('contextmenu', function ( conn, e ) {

      e.preventDefault ()

      e.stopPropagation ()

     ///// ....

})

//连接线的单击事件

idePageJsPlumstance.bind ('mousedown', function ( conn, e ) {

///// ....

})

//开始拖动新连接时

idePageJsPlumstance.bind ('beforeDrag', function ( info )  {

///// ....

})

// 结束拖动新连接时

idePageJsPlumstance.bind ('beforeDrop', function ( info )  {

///// ....

}

// 连接事件 注册线的参数

idePageJsPlumstance.bind ('connection', function ( info ) {

///// ...

})

// 开始拖动现有连接

idePageJsPlumstance.bind('beforeStartDetach',function (conn)  {

///// ....

})

//页面线的dom

const connectors =idePageJsPlumstance.getAllConnections ()

//删除点，线 节点

idePageJsPlumstance.detach(con)

idePageJsPlumstance.remove(id)

idePageJsPlumstance.removeAllEndpoints(id)

3. 储存和回显重新代码生成操作

a . 储存的话，先将拖动的新增节点信息保存,比如left 、id、 top 固定信息保存

再将线保存线有五个参数通过遍历idePageJsPlumstance.getAllConnections() //线数据获取，保存线的id、 sourceId、targetId 还有点锚点的起止位置参数

b . 重新代码生成还原节点后

idePageJsPlumstance.ready (function () {

     idePageJsPlumstance.connect ({

            source: startKey,

            target:endKe,

            anchors: [sourcepoint, item.targetpoint ],

            endpoint: 'Dot',

            isSource: true,

            isTarget: true,

     })

})

再注册相应的拖拽事件

四．总结：

代码回显时候显示连接线用jsPlumb.connect()，
在项目中每个锚点是层级关系，层级叠加要处理好，
在拖拽事件中，生成点，再连线，注意好相关顺序，顺序不一样，影响不一样，
有些事件参数不起作用，需要代码控制。
自带zoom 要和位置等相结合使用，避免冒泡

JsPlumb在react的使用方法及介绍的更多相关文章

React Native之FlatList的介绍与使用实例
React Native之FlatList的介绍与使用实例功能简介 FlatList高性能的简单列表组件,支持下面这些常用的功能: 完全跨平台. 支持水平布局模式. 行组件显示或隐藏时可配置回调事件 ...
KEGG数据库的使用方法与介绍
KEGG数据库的使用方法与介绍 KEGG的数据 KEGG中的pathway是根据相关知识手绘的,这里的手绘的意思可能是指人工以特定的语言格式来确定通路各组件的联系:基因组信息主要是从NCBI等数据库中 ...
使用JsPlumb绘制拓扑图的通用方法
转自:http://www.it165.net/pro/html/201311/7616.html 使用JsPlumb绘制拓扑图的通用方法一. 实现目标绘制拓扑图, 实际上是个数据结构和算法的问题 ...
使用Memcache在PHP中调试方法的介绍及应用
使用Memcache在PHP中调试方法的介绍及应用如果我们在网络开发中,特别是大访问量的web项目开发中,为了提高响应速度,减少数据查询运算,那么我们都会选用memcahce.首先我们必须要安装,接 ...
InputStreamReader 和 OutputStreamWriter类使用方法简单介绍，及演示。
InputStreamReader 和 OutputStreamWriter类使用方法简单介绍. 一.InputStreamReader类 InputStreamReader 将字节流转换为字符流.是 ...
[react 基础篇]——React.createClass(）方法同时创建多个组件类
react 组件 React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件.React.createClass 方法就用于生成一个组件类一个组 ...
React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)
React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例) TextInput组件介绍 TextInput是一个允许用户在应用中通过键盘输入文本的基本组 ...
04-vi使用方法详细介绍
vi使用方法详细介绍 vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令.由于对Unix及Linux系统的任何版 ...
使用 JsPlumb 绘制拓扑图的通用方法
摘要: 实现 JsPlumb 绘制拓扑图的通用方法. 只要服务端返回一个符合指定格式的数据结构,就可以绘制相应的拓扑图. 难度: 中级示例工程见: http://download.csdn.net ...

随机推荐

《InsideUE4》-6-GamePlay架构（五）Controller
<InsideUE4>-6-GamePlay架构(五)Controller Tags: InsideUE4 GamePlay 那一天 Pawn又回想起了被Controller所支配的恐惧 ...
IOS基础库
iOS 开发者中心 https://developer.apple.com/devcenter/ios/inde ...
mybatis mapper association collection
1.Question Description: sometimes, POJO bean contains another bean or collection as property, it's s ...
Java中常用的字符编码-解析
ASCII字符编码美国信息互换标准代码,为罗马字母编制的一套编码,主要用于表达现代英语和其他西欧语言中的字符,1字节的7位表示一个字符. ISO-8859-1字符编码 ISO为西欧语言中的字符制定的 ...
wordpress+php+mysql 配置
下载并解压wordpress之后,在mysql新建一个数据库,命名,例如testDB1,然后在IIS中新建虚拟目录,指向wordress所在的目录,删除wordpress目录下的wp-config.p ...
Mysql 临时变量的定义和赋值 Set 和 Into 赋值; Swith Mysql版本 Case When的用法
一:临时变量的定义和赋值 DECLARE spot SMALLINT; -- 分隔符的位置 DECLARE tempId VARCHAR(64); -- 循环需要用到的临时的Cid DECLARE ...
用C#实现控制台进度条
在写一些简单的控制台测试程序时,经常希望能够在程序运行的过程中实现进度条的功能以便查看程序运行的速度或者进度.本文以C#为例,实现简单的控制台进度条,以供大家参考(本文底部附下载地址). 1.实现效果 ...
初学socket，c语言写的简单局域网聊天
在客户端所在的目录新建一个IP.bwj的文件,写上服务端的IP,不要带空格,保存.双方都打开一个客户端和一个服务端就可以聊天了,(可以写自己的IP,自己跟自己聊..)没有第三方服务器,服务端所在的电脑 ...
clientX 属性.
Syntax: event.clientX The clientX event attribute returns the horizontal coordinate (according to th ...
centos7 docker安装详解
查看内核和操作系统版本[root@prod3 ~]# uname -r3.10.0-327.el7.x86_64[root@prod3 ~]# cat /etc/redhat-release Cent ...

JsPlumb在react的使用方法及介绍

JsPlumb在react的使用方法及介绍

一．相关资料来源：

二．引用库：

三．在React使用方法：

在我的react项目中，分菜单栏和画布，菜单栏是可拖动子菜单，将菜单拖到画布上，在画布上进行对子菜单项目的操作，大概是这样：

在使用过程中，应为拖动事件，和画图事件都是要先有dom节点,所以，一定要有节点的时候再注册相应的监听事件：

a. React项目中要在 componentDidMount() 生命周期后开始操作，因为是单页面应用，要保证当前页面渲染完成后注册jsplumb实例，离开后要销毁实例所以

b. 在左侧子菜单渲染完后要注册拖拽事件，这里用的是jq ui 拖动 不熟悉的可以搜下jq ui 这里这样写的：

c. 在面板中，要获取位置生成新的dom 对新dom注册事件, （此处以简写，具体方式根据实际项目来做）

d. 同时要对线做一些事件，这里有

3. 储存和 回显 重新代码生成操作

四．总结：

JsPlumb在react的使用方法及介绍的更多相关文章

随机推荐

b. 在左侧子菜单渲染完后要注册拖拽事件，这里用的是jq ui 拖动不熟悉的可以搜下jq ui 这里这样写的：

3. 储存和回显重新代码生成操作