JSFiddle - React, Tailwind, and code Playground

by vrpruthvi

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script>
Instructions:<br />
- Click on the add project button twice.<br />
- 2 Green projects will appear overlapping - drag them apart.<br />
- Click on each Green project once. Tasks will appear.<br />
- Make only 1 bond by dragging from respective to corresponding white spaces.<br />
- Drag each project again, <strong>one end point will not move.</strong><br />
<button id='addproject' type="button">Add project!</button>
<div id="container">
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Montserrat);

* {
  font-family: 'Montserrat', sans-serif;
}
#container {
  position: relative;
  border: 1px solid #aaaaaa;
  width: 800px;
  height: 650px;
}
.title {
  padding: 10px;
  cursor: move;
}
.connect {
    font-size:10px;
  width: 100%;
  height: 20px;
  background-color: #ffffff;
  cursor: pointer;
}
.project {
  border: 1px solid gray;
  width: 170px;
  height: auto;
  background: #4DAF7C;
  color: #ffffff;
  position: absolute;
}
.task {
  color: #723D61;
  font-size: 16px;
  border: 1px solid black;
  background-color: #ddddff;
}

JavaScript

jsPlumb.ready(function() {

  jsPlumb.Defaults.Container=$("#container");
  jsPlumb.Defaults.PaintStyle = { strokeStyle:"#F09E30", lineWidth:2, dashstyle: '3 3', };
  jsPlumb.Defaults.EndpointStyle = { radius:7, fillStyle:"#F09E30" };
  jsPlumb.importDefaults({Connector : [ "Bezier", { curviness:50 } ]});
  
  var i = 1;

  $('#addproject').click(function(e) {
    var newAgent = $('<div>').attr('id', 'project' + i).addClass('project');
    newAgent.text('Project ' + i);
    
    $('#container').append(newAgent);
  
      newAgent.draggable({
            containment: 'parent',
            drag:function(e){
	    	   	$(this).find('._jsPlumb_endpoint_anchor_').each(function(i,e){ 
                    if($(e).hasClass("connect"))
                        jsPlumb.repaint($(e).parent());
                    else
                        jsPlumb.repaint($(e));
				});										
            }
        });

    i++;
  });

  $("#container").on('click','.project',function(e) {
    var newState = $('<div>').attr('id', 'state' + i).addClass('task');

    var title = $('<div>').addClass('title').text('Task ' + i);
    var connect = $('<div>').addClass('connect').text('click here to drag a bond');

    newState.css({
      'top': e.pageY,
      'left': e.pageX
    });

    newState.append(title);
    newState.append(connect);
 
    $(this).append(newState);

    jsPlumb.makeTarget(newState, {
      anchor: 'Continuous'
    });

    jsPlumb.makeSource(connect, {
      parent: newState,
      anchor: 'Continuous'
    });

    newState.dblclick(function(e) {
      jsPlumb.detachAllConnections($(this));
      $(this).remove();
      e.stopPropagation();
    });

    i++;    
  });  
});