JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://jsplumb.org/js/jquery.jsPlumb-1.3.14-all-min.js"></script>
<div class="demo">
<div id="window1">
<div class="hola" id="hola">Hola1</div>
<div class="hola" id="hola2">Hola2</div>
<div id="minimize">Minimize</div>
</div>
<div id="window2">
<p>Window2 content</p>
</div>
</div>
CSS
#window1, #window2 {
width: 150px;
height: 150px;
padding: 0.5em;
border-style: solid;
position:absolute;
z-index:5;
top: 20px;
left: 10px;
}
#window2 {
left: 400px;
}
.hola {
border: 1px solid black;
padding:4px;
margin-bottom: 4px;
}
.demo {
overflow:auto;
height:400px;
border:1px solid black;
background-color:white;
position:relative;
}
._jsPlumb_connector {
z-index:4;
}
._jsPlumb_endpoint {
z-index:6;
}
JavaScript
jsPlumb.ready(function() {
jsPlumb.importDefaults({
Container:$(".demo")
});
var targetOption = {
isSource:false,
isTarget:true,
maxConnections: 2,
endpoint:["Dot", {radius:5}]};
var sourceOption = {anchor:"RightMiddle",
isSource:true,
isTarget:false,
endpoint:["Dot", {radius:5}],
paintStyle:{fillStyle:"#FFEF00"},
dragAllowedWhenFull:true};
jsPlumb.bind("ready", function() {
jsPlumb.addEndpoint('window1', targetOption);
jsPlumb.addEndpoint('window2', targetOption);
jsPlumb.addEndpoint('hola', sourceOption);
jsPlumb.addEndpoint('hola2', sourceOption);
jsPlumb.draggable($("#window1,#window2"));
});
});
$("#minimize").click( function() {
$("#window1").css('height', '30px');
$(".hola").css('height', '0px').css('visibility','hidden');
$("#minimize").hide();
jsPlumb.repaintEverything();
});