JSFiddle - React, Tailwind, and code Playground

by basmaat

HTML

<script src="http://jsplumb.googlecode.com/files/jquery.jsPlumb-1.3.2-all-min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<span id="okenko1">This is the destination</span>
<span id="okenko2">This is the origin</span>

CSS

body{font-family:arial}

JavaScript

jsPlumb.Defaults.PaintStyle = {
    lineWidth:3,
    strokeStyle: 'rgba(200,0,0,100)'
}

// jsPlumb.Defaults.Overlays = [ "Arrow", { location:0.9 } ];    
    
    
// var e = $("#okenko2").dialog({drag: function(event, ui){
//    jsPlumb.repaint(d);
// }}).parent('.ui-dialog');
    
var d = $("#okenko1").dialog({drag: function(event, ui){
    jsPlumb.repaint(d);
}}).parent('.ui-dialog');

jsPlumb.connect({source: $("#okenko2"), target: d, 
                 endpoint:"Rectangle",
                 connector:"Flowchart",
                 anchors:["BottomCenter", "TopCenter"]
                 });