jointjs拖拽节点连线效果代码-html代码-BFW代码库

jointjs拖拽节点连线效果代码

代码语言：html

所属分类：拖放

代码描述：jointjs拖拽节点连线效果代码

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

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

<head>
  <meta charset="UTF-8">
  
  
<style>
body { 
  font-family: 'PT Serif', serif;
  font-size: 24px;
}
</style>


  
</head>

<body translate="no">
  <div style="width:100%; white-space:nowrap;">
    <span style="display: inline-block; vertical-align: top;">
      <div id="draggableElementContainerPaper" style="border: solid 1px black; margin: 20px;"></div>
    </span>
    <span style="width:5%"></span>
    <span style="display: inline-block; vertical-align: top;">
      <div id="paper" style="border: solid 1px black; margin: 20px;"></div>
    </span>
</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 >
var graph = new joint.dia.Graph();
var paper = new joint.dia.Paper({
  el: document.getElementById('paper'),
  gridSize: 1,
  width: 1000,
  height: 700,
  model: graph,
  snapLinks: true,
  linkPinning: false,
  background: {
    color: '#e6ffff',
    opacity: 0.3 },

  defaultLink: new joint.dia.Link({
    markup: [
    '<path class="connection" stroke="black" d="M 0 0 0 0"/>',
    '<path class="connection" stroke= "#fe854f" stroke-width= "4" />',
    '<path class="marker-target" fill="#fe854f" stroke="#fe854f" d="M 10 0 L 0 5 L 10 10 z"/>',
    '<path class="connection-wrap" d="M 0 0 0 0"/>',
    '<g class="labels"/>',
    '<g class="marker-vertices"/>',
    '<g class="marker-arrowheads"/>',
    '<g class="link-tools"/>'].
    join('') }),

  highlighting: {
    'default': {
      name: 'stroke',
      options: {
        padding: 20 } } },



  validateConnection: function (sourceView, sourceMagnet, targetView, targetMagnet) {

    return sourceMagnet != targetMagnet;
  } });



var draggableElementContainerGraph = new joint.dia.Graph();
var draggableElementContainerPaper = new joint.dia.Paper({
  el: document.getElementById('draggableElementContainerPaper'),
  gridSize: 1,
  width: 150,
  height: 700,
  model: draggableElementContainerGraph,
  interactive: false,
  background: {
    color: '#ecf8ec',
    opacity: 0.3 } });



var connect = function (source, sourcePort, target, targetPort) {

  var link = new joint.dia.Link({
    source: {
      id: source.id,
    .........完整代码请登录后点击上方下载按钮下载查看