JS组件系列——JsPlumb连线及相关效果详解

<script src="~/Content/jquery-1.9.1.min.js"></script>
<script src="~/Content/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<link href="~/Content/jquery-ui-1.11.4.custom/jquery-ui.min.css" rel="stylesheet" />
<script src="~/Content/jsPlumb-master/dist/js/jquery.jsPlumb-1.7.5.js"></script>

　　　　　　<div id="divContentLeftMenu">
            <div class="sidebar-menu" id="divSidebar">
                <a href="#plantmodel" onclick="Resize()" class="nav-header menu-first collapsed" data-toggle="collapse">工厂模型</a>
                <ul id="plantmodel" class="nav nav-list collapse menu-second">
                </ul>
                <a href="#artlinemodel" onclick="Resize()" class="nav-header menu-first collapsed" data-toggle="collapse">工艺段模型</a>
                <ul id="artlinemodel" class="nav nav-list collapse menu-second">
                    <li>
                        <a href="#">
                            <div class="node radius" id="node4" dbtype="DTO_TM_ART_LINE">
                                <label>工段</label>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="node" id="node5" dbtype="DTO_TM_ULOC">
                                <label>工位</label>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="divCenter"></div>

//基本连接线样式
var connectorPaintStyle = {
    strokeStyle: "#1e8151",
    fillStyle: "transparent",
    radius: 5,
    lineWidth: 2
};
// 鼠标悬浮在连接线上的样式
var connectorHoverStyle = {
    lineWidth: 3,
    strokeStyle: "#216477",
    outlineWidth: 2,
    outlineColor: "white"
};
var endpointHoverStyle = {
    fillStyle: "#216477",
    strokeStyle: "#216477"
};
//空心圆端点样式设置
var hollowCircle = {
    DragOptions: { cursor: ‘pointer‘, zIndex: 2000 },
    endpoint: ["Dot", { radius: 7 }],  //端点的形状
    connectorStyle: connectorPaintStyle,//连接线的颜色，大小样式
    connectorHoverStyle: connectorHoverStyle,
    paintStyle: {
        strokeStyle: "#1e8151",
        fillStyle: "transparent",
        radius: 5,
        lineWidth: 2
    },        //端点的颜色样式
    //anchor: "AutoDefault",
    isSource: true,    //是否可以拖动（作为连线起点）
    connector: ["Straight", { stub: [0, 0], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }],  //连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ]
    isTarget: true,    //是否可以放置（连线终点）
    maxConnections: -1,    // 设置连接点最多可以连接几条线
    connectorOverlays: [["Arrow", { width: 10, length: 10, location: 1 }]]
};

　　　　　　　　$(function(){
                //左边区域的draggable事件
                $("#divContentLeftMenu .node").draggable({
                    helper: "clone",
                    scope: "plant"
                });

                //中间拖拽区的drop事件
                $("#divCenter").droppable({
                    scope: "plant",
                    drop: function (event, ui) {
                        // 创建工厂模型到拖拽区
                        CreateModel(ui, $(this));
                    }
                });
　　　　　　　　});    

//1.创建模型（参数依次为：drop事件的ui、当前容器、id、当前样式）
 function CreateModel(ui, selector) {
        //1.1 添加html模型
        var modelid = $(ui.draggable).attr("id");
        i++;
        var id = modelid + i;
        var cur_css = modelid;
        var type = $(ui.helper).attr("dbtype");
        $(selector).append(‘<div class="node ‘ + cur_css + ‘" id="‘ + id + ‘" dbtype="‘ + type + ‘" parentid="‘ + $(selector).attr("id") + ‘" onclick="oInitElement.GetPropertiesByType(\‘‘ + type + ‘\‘,this)" ondblclick="InitStation().DbClick(\‘‘ + type + ‘\‘,this)" >‘ + $(ui.helper).html() + ‘</div>‘);
        var left = parseInt(ui.offset.left - $(selector).offset().left);
        var top = parseInt(ui.offset.top - $(selector).offset().top);
        $("#" + id).css("left", left).css("top", top);
        //jsPlumb.setContainer($("#divCenter"));
        //1.2 添加连接点
        jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);
        jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle);
        jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle);
        jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle);
        jsPlumb.draggable(id);

        //1.3 注册实体可draggable和resizable
        $("#" + id).draggable({
            containment: "parent",
            start: function () {
                startMove();
            },
            drag: function (event, ui) {
                MoveSelectDiv(event, ui, id);
                jsPlumb.repaintEverything();
            },
            stop: function () {
                jsPlumb.repaintEverything();
            }
        });

        $("#" + id).resizable({
            resize: function () {
                jsPlumb.repaintEverything();
            },
            stop: function () {
                jsPlumb.repaintEverything();
                //oInitElement.SendPropRequest("DTO_TM_PLANT", $(this));
            }
        });
        return id;
    };

jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);

jsPlumb.repaintEverything();