jointjs实现节点输入输出拖拽连线效果代码

代码语言:html

所属分类:拖放

代码描述:jointjs实现节点输入输出拖拽连线效果代码

代码标签: jointjs 节点 输入 输出 拖拽 连线

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  



  
  
</head>

<body translate="no">
  <div id="myholder"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lodash.4.17.21.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/backbone-min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/joint.3.7.2.js"></script>
      <script >
(function() {

  var graph = new joint.dia.Graph;
  var paper = new joint.dia.Paper({ el: $('#myholder'), width: 2000, height: 2000, gridSize: 1, snapLinks: true, model: graph, background: { color: '#ccc' } });

  for (var i = 0; i < 5; i++) {
    var model = new joint.shapes.devs.Model({
         position: { x: 50*(i+2), y: 150*i },
        size: { width: 90, height: 9.........完整代码请登录后点击上方下载按钮下载查看

网友评论0