Draw Dynamic Lines Between Two Lists - jQuery FieldsLinker

FieldsLinker is a jQuery plugin for drawing canvas based straight lines (with or without squares at the end) between 2 items within dynamic lists.

Can be used to visualize the relationship between 2 lists.

See Also:

• jQuery Plugin To Connect Two Html Elements with A Line
• Draw SVG Paths Between Two Elements – leader-line
• Draw Directional SVG Paths Between Elements – svgDynamicDirectionalPath.js
• jQuery Plugin To Connect HTML Elements with Lines - HTML SVG Connect
• Add Connecting Lines Between Block Elements - Connections
• jQuery plugin To Visualize Connections Between Elements - jqSimpleConnect

How to use it:

1. Add references to jQuery library and the jQuery FieldsLinker plugin's files:

<link rel="stylesheet" href="fieldsLinker.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="fieldsLinker.js"></script>

2. Define your own data for the lists.

var input = {

    "localization":{
      "mandatoryErrorMessage":"This field is mandatory"
    },
    
    "options":{
      // options
    },

    "listA":
      {
        "name":"Columns in files",
        "list" : [
          "firstName",
          "lastName",
          "phone",
          "email",
          "role",
          "Birthday",
          "Adress",
          "Sales",
          "City"
        ]
      },

    "listB":
      {
        "name":"Available Fields",
        "list" : [
          "Company",
          "jobTitle",
          "adress 1",
          "adress 2",
          "first_name",
          "last_name",
          "email_adress",
          "Phone number"
        ],
        "mandatories" :[
          "last_name",
          "email_adress"
        ]
      },

    //"existingLinks" : [{"from":"firstName","to":"first_name"}]

};

3. Initialize the jQuery FieldsLinker plugin to render the lists on the page.

<div id="example">
</div>

fieldLinks = $("#example").fieldsLinker("init",input);

4. Default options to customize the jQuery FieldsLinker plugin.

"options":{
  canvasId: "",
  canvasCtx: null,
  canvasPtr: null,
  canvasWidth: 0,
  canvasHeight: 0,
  onError: false,
  className: "fieldsLinker",
  byName: false,
  linksByOrder: [],
  linksByName: [],
  List1: [],
  List2: [],
  Mandatories: [],
  ListHeights1: [],
  ListHeights2: [],
  move: null,
  that: null,
  lineStyle: "straight", // straight or square-ends
  handleColor: "#0000AD,#00AD00,#FF4500,#AD00AD,#244FBD,#582900,#FFCC00,#000000,#33FFCC,#FF0096,#666666".split(","),
  lineColor: "black",
  autoDetect: "off",
  oneToMany: "off",
  mandatoryErrorMessage: "This field is mandatory",
  mandatoryTooltips: true,
  canvasTopOffset: 0,
  isDisabled: false,
  globalAlpha: 1,
  effectHover: "off",
  effectHoverBorderWidth: 2,
  effectHoveredLink: -1,
},

 

---

This awesome jQuery plugin is developed by PhilippeMarcMeyer. For more Advanced Usages, please check the demo page or visit the official website.