# jsPlumb-demo

**Repository Path**: wangcc1987/jsPlumb-demo

## Basic Information

- **Project Name**: jsPlumb-demo
- **Description**: jsPlumb-demo  web流程设计
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: http://wangcc1987.gitee.io/jsplumb-demo/
- **GVP Project**: No

## Statistics

- **Stars**: 13
- **Forks**: 8
- **Created**: 2019-03-17
- **Last Updated**: 2023-11-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

![输入图片说明](https://images.gitee.com/uploads/images/2019/0323/211837_328ce9f5_2017165.png "屏幕截图.png")

 **什么也不想说。看图看效果。** 

*  **1. 节点添加** 

       （1）添加图形

       （2）在xml中增加位置节点以及流程节点

       （3）节点拖动。更新xml中的位置信息

       （4）节点拖动，影响到了连线的坐标信息。


*  **2、节点删除** 

      （1）删除xml中的位置信息以及流程节点

      （2）删除xml中该节点相关的所有连线节点以及连线坐标。

      （3）删除html图形节点

      （4）删除该节点对应的端点以及所有连线。
    

* **  **3、添加连线** 

       jsplumb监听connection事件

      （1）在xml的process节点中增加连线节点。

      （2）在xml中添加连线的位置信息。


*  **4、连线删除** 

       jsplumb监听connectionDetached事件

      （1）删除xml中的连线节点

      （2）删除xml中连线的位置信息。

*  **5、连线拖动** 

       jsplumb监听connectionDragEnd事件

      （1）更新xml中连线节点信息以及位置信息。



```
            //删除节点
            this.$el.on("click", ".delete",function () {
                var $this = $(this);
                $.modal.confirm('确定要删除该节点吗',function(){
                    jsPlumb.removeAllEndpoints($this.parent().attr("id"));
                    //$this.parent().remove();

					let $node = $this.parent();
					let id = $node.attr("id");

					// 删除到该节点的所有连接
				   jsPlumb.select({source:id}).each(function(conn){
					   //var flow = getSequenceFlow(conn);
					   //removeNodeOrFlow("sequenceFlow",$(flow).attr("id"));
					   jsPlumb.detach(conn);
				   });
				   jsPlumb.select({target:id}).each(function(conn){
					   //var flow = getSequenceFlow(conn);
					   //removeNodeOrFlow("sequenceFlow",$(flow).attr("id"));
					   jsPlumb.detach(conn);
				   });
				   $node.remove();
                });
            });
```