JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HAML

%script{src: "https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.15.2/js/jsplumb.min.js"}
#a.box
#b.box

CSS

.box{
  position: absolute;
  width: 200px;
  height: 50px;
  border: solid 1px gray;
}

#b.box{
  top: 200px;
  left: 200px;
  border-color:red;
}

Babel + JSX

/**
* In a matter of explanation
*/
const createAnchorDirection = (options) => {
	const {
    positionX,
    positionY,
    directionX,
    directionY,
    shiftX,
    shiftY,
    classNamePostfix,
  } = options;
  
  return [
	  positionX,
    positionY,
    directionX,
    directionY,
    shiftX,
    shiftY,
    classNamePostfix,
  ];
};	

const topAnchor = createAnchorDirection({
	positionX: 0.5,
  positionY: 0,
  directionX: 0,
  directionY: -1,
  shiftX: 0,
  shiftY: 0,
  classNamePostfix: 'top',
});

const rightAnchor = createAnchorDirection({
	positionX: 1,
  positionY: 0,
  directionX: 1,
  directionY: 0,
  shiftX: 0,
  shiftY: 22,
  classNamePostfix: 'right',
});

const leftAnchor = createAnchorDirection({
	positionX: 0,
  positionY: 0,
  directionX: -1,
  directionY: 0,
  shiftX: 0,
  shiftY: 22,
  classNamePostfix: 'left',
});

const bottomAnchor = createAnchorDirection({
	positionX: 0.5,
  positionY: 1,
  directionX: 0,
  directionY: 1,
  shiftX: 0,
  shiftY: 0,
  classNamePostfix: 'bottom',
});



jsPlumb.bind('ready', () => {
	const plumb = jsPlumb.getInstance({
	  Connector: [ 'Flowchart', {cornerRadius: 10,} ],
    Anchor: [
			topAnchor,
      rightAnchor, 
      leftAnchor, 
      bottomAnchor,
    ]
  });
  
  
  
  plumb.connect({
  	source: $('#a'),
  	target: $('#b'),
  });
  
  plumb.draggable($('.box'));
});