jsPlumb-demo
/
index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
 <style>
    .node{
        /*z-index: 20;*/
        position: absolute;
        cursor: pointer;
        text-align: center;
        color: black;
    }

    .node-border {
        box-shadow: 2px 2px 19px #aaa;
        -o-box-shadow: 2px 2px 19px #aaa;
        -webkit-box-shadow: 2px 2px 19px #aaa;
        -moz-box-shadow: 2px 2px 19px #aaa;
        -moz-border-radius: 0.5em;
        border-radius: 0.5em;
        opacity: 0.8;
        filter: alpha(opacity=80);
        border: 1px solid #346789;
        background-color: #eeeeef;
    }

    .node-event {
        width:45px;
        padding: 10px;
        font-size: 9pt;
        cursor: pointer;
        height:65px;
        line-height: 30px;
        padding: 10px 0px;
    }

    .node-task {
        width:105px;
        padding: 10px;
        font-size: 9pt;
        cursor: pointer;
        height:65px;
        line-height: 25px;
        padding: 10px 0px;
        text-align: center;
    }

    .node .node-pic {
        display: block;
    }

    .designer-wrapper {
        padding: 0 20px;
    }

    .designer-wrapper .designer-tool {
        padding: 0px;
    }

    .designer-wrapper .designer-center {
        padding: 0px;
    }

    .designer-panel{
        min-height: 492px;
    }

    .jtk-drag {
        outline: 4px solid pink !important;
    }

    .node-select {
        /*outline: 4px solid blue !important;
        border: 2px solid blue;*/
        background-color: #F39814;
    }

    .node:hover{
        border: 2px solid blue;
    }

    .endpointHide{
        display: none;
    }

    .src-node {
        text-align:center;
        margin: 0 auto;
        margin-top: 15px;
        cursor: pointer;
        color: black;
    }

    /**流程设计区域网格显示*/
    #canvasPanel {
        background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%),linear-gradient(rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%);
        background-size: 10px 10px;
    }

    /**连线点*/
    .ep {
        width: 10px;
        height: 10px;
        position: absolute;
        left: calc(100% - 5px);
        top: calc(50% - 5px);
        cursor: pointer;
        border-radius: 10px;
        background-color: rgb(153, 68, 102);
        z-index:100;
        display: none;
    }

    /*节点上的删除图标样式**/
    .delete {
        width: 14px;
        height: 14px;
        position: absolute;
        left: calc(100% - 7px);
        top: -7px;
        border-radius: 10px;
        border: 1px solid #ed5565;
        text-align: center;
        line-height: 12px;
        display: none;
    }


  </style>

<!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://at.alicdn.com/t/font_1088215_lk1fnbovp2.css" rel="stylesheet">
    <link href="js/layer/theme/moon/style.css" rel="stylesheet">


    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

  <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  <script src="js/jsplumb/jsplumb.min.js"></script>
  <script src="js/layer/layer.min.js"></script>
  <script src="js/bpmnflow.js"></script>


  <title>jsplumb</title>
 </head>
 <body>

 <div class="designer-wrapper animated fadeIn">
    <div class="row">
        <div class="col-sm-2 designer-tool">
            <div class="panel panel-primary">
                <div class="panel-heading text-center">
                    <span class="fa fa-wrench fa-lg"></span> 工具
                </div>
                <div class="panel-body  designer-panel">
                    <div id="toolPanel" class="designer-panel" style="position: absolute;width: 100%;left: 0px;top:40px;scroll:auto;" >
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-10 designer-center">
            <div class="panel panel-info">
                <div class="panel-heading" style="padding-top: 7.5px;padding-bottom: 7.5px;">
                    <div class="btn-group-xs">
                        <i id="showTool" class="fa fa-bars" style="margin-right: 10px;"></i>
                        <a id="clearCanvas" class="btn btn-danger btn-xs">
                            <i class="fa fa-trash-o"></i> 清空
                        </a>
                        <a class="btn btn-primary btn-edit btn-xs " >
                            <i class="fa fa-edit"></i> 模板导入
                        </a>
                        <a class="btn btn-info btn-del btn-xs "  >
                            <i class="fa fa-paper-plane"></i> 任务发布
                        </a>
                        <a class="btn  btn-xs "  >
                            <input id="file" type="file" style="display: inline;" />
                        </a>

                    </div>
                </div>
                <div  class="panel-body designer-panel" >
                    <div id="canvasPanel" class="designer-panel pre-scrollable" style="position: absolute;width: 100%;left: 0px;top:40px;" >
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>


    $(function () {
        //封装
        $.extend({
            // 弹出层封装处理
            modal: {
                // 显示图标
                icon: function(type) {
                    var icon = "";
                    if (type == modal_status.WARNING) {
                        icon = 0;
                    } else if (type == modal_status.SUCCESS) {
                        icon = 1;
                    } else if (type == modal_status.FAIL) {
                        icon = 2;
                    } else {
                        icon = 3;
                    }
                    return icon;
                },
                // 消息提示
                msg: function(content, type) {
                    if (type != undefined) {
                        layer.msg(content, { icon: $.modal.icon(type), time: 1000, shift: 5 });
                    } else {
                        layer.msg(content);
                    }
                },
                // 错误消息
                msgError: function(content) {
                    $.modal.msg(content, modal_status.FAIL);
                },
                // 成功消息
                msgSuccess: function(content) {
                    $.modal.msg(content, modal_status.SUCCESS);
                },
                // 警告消息
                msgWarning: function(content) {
                    $.modal.msg(content, modal_status.WARNING);
                },
                // 弹出提示
                alert: function(content, type) {
                    layer.alert(content, {
                        icon: $.modal.icon(type),
                        title: "系统提示",
                        btn: ['确认'],
                        btnclass: ['btn btn-primary'],
                    });
                },
                // 消息提示并刷新父窗体
                msgReload: function(msg, type) {
                    layer.msg(msg, {
                            icon: $.modal.icon(type),
                            time: 500,
                            shade: [0.1, '#8F8F8F']
                        },
                        function() {
                            $.modal.reload();
                        });
                },
                // 错误提示
                alertError: function(content) {
                    $.modal.alert(content, modal_status.FAIL);
                },
                // 成功提示
                alertSuccess: function(content) {
                    $.modal.alert(content, modal_status.SUCCESS);
                },
                // 警告提示
                alertWarning: function(content) {
                    $.modal.alert(content, modal_status.WARNING);
                },
                // 关闭窗体
                close: function () {
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                },
                // 关闭全部窗体
                closeAll: function () {
                    layer.closeAll();
                },
                // 确认窗体
                confirm: function (content, callBack) {
                    layer.confirm(content, {
                        icon: 3,
                        title: "系统提示",
                        btn: ['确认', '取消'],
                        btnclass: ['btn btn-primary', 'btn btn-danger'],
                    }, function (index) {
                        layer.close(index);
                        callBack(true);
                    });
                }
            }
        });

        /** 弹窗状态码 */
        modal_status = {
            SUCCESS: "success",
            FAIL: "error",
            WARNING: "warning"
        };

        var idIndex = 100;

        var $canvasPanel = $( "#canvasPanel");


        $("#toolPanel").append($.BpmnFlowChart.DEFAULTS.start).append($.BpmnFlowChart.DEFAULTS.timer).append($.BpmnFlowChart.DEFAULTS.serviceTask).append($.BpmnFlowChart.DEFAULTS.parallelgateway).append($.BpmnFlowChart.DEFAULTS.exclusivegateway).append($.BpmnFlowChart.DEFAULTS.end);

        $("#toolPanel").children("div").addClass("src-node");

        $("#toolPanel").find("i").css({"display":"block"});

        $(".src-node").draggable({
            appendTo:"body",
            scroll:true,
            revert:true,
            start:function(event,ui){
                $(this).draggable('option','cursor','not-allowed');
            },
            stop:function(event,ui){
                $(this).draggable('option','cursor','move');
            },
            helper: function(){
                //克隆节点并且加上连线点、删除图标
                return $(this).clone().removeClass("src-node").addClass("node")/*.append($("<div class='ep'></div>")).append("<div class='delete'><i class='fa fa-close' style='color:#ed5565;'></i></div>")*/[0];
            },
            scope: "ss",zIndex:99
        });


        var canvasPanel = $canvasPanel.bpmnFlowChart({

        });

        $( "#canvasPanel" ).droppable({
            scope: "ss",
            drop: function( event, ui ) {
                var left = parseInt(ui.offset.left - $(this).offset().left);
                var top = parseInt(ui.offset.top - $(this).offset().top);
                ///var $node = $(ui.helper).clone().css("left", left).css("top", top).css("z-index",0).css("font-weight","bold");
                idIndex++;
                var thisId = name+idIndex;
                var $node = $(ui.helper).clone();
                $node.attr("id",$node.attr("name")+thisId);
                $canvasPanel.bpmnFlowChart("drawNode",{
                    "top":top,
                    "left":left,
                    "node":$node
                });

            }
        });


        //隐藏或显示左侧工具面板
        $("#showTool").click(function () {
            $(".designer-tool").toggle('slow');
            $(".designer-center").toggleClass('col-sm-10');
        });


        // 双击修改连线描述,
        jsPlumb.bind('dblclick', function (conn, originalEvent) {
            var $this = $(this);
            layer.prompt({title: '连线名称', formType: 2, value: conn.getOverlay("label").getLabel(),maxlength: 20}, function(text, index){
                layer.close(index);
                conn.getOverlay("label").setLabel(text);
            });
            /**
            $.modal.confirm('确定删除所点击的链接吗？',function(){
                //jsPlumb.deleteConnection(conn);
            });**/
        });

        jsPlumb.bind("connection", function (connInfo, originalEvent) {
            if (connInfo.connection.sourceId === connInfo.connection.targetId) {
                jsPlumb.deleteConnection(connInfo.connection);
                $.modal.alertError("不能连接自己！");
            }else{
               console.log("连接"+connInfo.connection.sourceId+"==="+connInfo.connection.targetId);
            }
        });

        jsPlumb.bind("connectionDrag", function (connection) {
            console.log("connection " + connection.id + " is being dragged. suspendedElement is ", connection.suspendedElement, " of type ", connection.suspendedElementType);
        });

        jsPlumb.bind("connectionDragStop", function (connection) {
            console.log("connection " + connection.id + " was dragged");
        });

        jsPlumb.bind("connectionMoved", function (params) {
            //console.log("connection " + params.connection.id + " was moved");
        });


        $('#file').change(function () {


            $.get(URL.createObjectURL($(this)[0].files[0]), {},function(result){

                var $xml = $(result);

                $canvasPanel.bpmnFlowChart("loadBpmnXml",{
                    "xml":$xml
                });


              },"xml");

        });


    });


</script>

 </body>
</html>