Draw Dynamic Lines Between Two Lists - jQuery FieldsLinker

File Size: 34 KB
Views Total: 7343
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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" 
<script src="fieldsLinker.js"></script>

2. Define your own data for the lists.

var input = {

      "mandatoryErrorMessage":"This field is mandatory"
      // options

        "name":"Columns in files",
        "list" : [

        "name":"Available Fields",
        "list" : [
          "adress 1",
          "adress 2",
          "Phone number"
        "mandatories" :[

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


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

<div id="example">
fieldLinks = $("#example").fieldsLinker("init",input);

4. Default options to customize the jQuery FieldsLinker plugin.

  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.