gojs实现流程图绘制拖动效果-html代码-BFW代码库

gojs实现流程图绘制拖动效果

代码语言：html

所属分类：图表

代码描述：gojs实现流程图绘制拖动效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">
        
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/goDataInspector.css">
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/go-1.89.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/goDataInspector.js"></script>
    <script id="code">
        function init() {
            if (window.goSamples) goSamples();
            var $$ = go.GraphObject.make;

            myDiagram =
                $$(go.Diagram, "myDiagramDiv",  // 创建空的背景图
                    {
                        initialContentAlignment: go.Spot.Center,
                        allowCopy: false,
                        allowDrop: true,  // must be true to accept drops from the Palette  必须接受来自调色板的元素
                        "LinkDrawn": showLinkLabel,  // this DiagramEvent listener is defined below
                        "LinkRelinked": showLinkLabel,
                        scrollsPageOnFocus: false,
                        "undoManager.isEnabled": true,  // 启用撤销和恢复
                        allowRelink : false
                    }
                );
            // helper definitions for node templates

            function nodeStyle() {
                return [
                    // The Node.location comes from the "loc" property of the node data,
                    // converted by the Point.parse static method.
                    // If the Node.location is changed, it updates the "loc" property of the node data,
                    // converting back using the Point.stringify static method.
                    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
                    {
                        // the Node.location is at the center of each node
                        locationSpot: go.Spot.Center
                    }
                ];
            }

            // Define a function for creating a "port" that is normally transparent.
            // The "name" is used as the GraphObject.portId,
            // the "align" is used to determine where to position the port relative to the body of the node,
            // the "spot" is used to control how links connect with the port and whether the port
            // stretches along the side of the node,
            // and the boolean "output" and "input" arguments control whether the user can draw links from or to the port.
            function makePort(name, align, spot, output, input, maxLinks) {
                var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
                // the port is basically just a transparent rectangle that stretches along the side of the node,
                // and becomes colored when the mouse passes over it
                return $$(go.Shape,
                    {
                        fill: "transparent",  // changed to a color in the mouseEnter event handler
                        strokeWidth: 0,  // no stroke
                        width: horizontal ? NaN : 8,  // if not stretching horizontally, just 8 wide
                   .........完整代码请登录后点击上方下载按钮下载查看