JSFiddle - React, Tailwind, and code Playground

by sporritt

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script src="http://localhost/programming/jsplumb-git/js/1.3.5/jquery.jsPlumb-1.3.5-all.js"></script>
<p>
    <a onclick="$('#tab1').show();" href="#">Show 1</a>, 
    <a onclick="init($('#tab1'));" href="#">Init 1</a>, 
    <a onclick="$('#tab1').hide();" href="#">Hide 1</a>
</p>
<p>
    <a onclick="$('#tab2').show();" href="#">Show 2</a>, 
    <a onclick="init($('#tab2'));" href="#">Init 2</a>, 
    <a onclick="$('#tab2').hide();" href="#">Hide 2</a>
</p><br>

<div id="tabs">
    <ul>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
    </ul>
    <div id="tab1" class="tab">
        <div id="a" class="view">
            <span>A</span>
        </div>
    </div>
    <div id="tab2" class="tab">
        <div id="b" class="view">
            <span>B</span>
        </div>
    </div>
</div>

CSS

div.tab {
    display: none;
    min-height: 20em;
    position: relative;
}

div.view {
    background-color: #ccc;
    position: absolute;
    padding: 1em;
    z-index: 2;
}

._jsPlumb_endpoint {
    z-index: 3;
}

#a {
    top: 2em;
    left: 3em;
}

#b {
    top: 5em;
    left: 12em;
}

#tabs {
    margin-top:5em;
}

JavaScript

jsPlumb.ready(function() {
    // The "{ radius: 7 }" seems to be triggering this, in combination with "repaintEverything"
    jsPlumb.Defaults.Endpoint = [ 'Dot', { radius: 17 } ];
    jsPlumb.Defaults.LogEnabled = true;
    jsPlumb.Defaults.RenderMode = 'canvas';
    
    init = function( elem ) {
        elem = $( elem );
        var initialized = elem.data( 'initialized ' );
        
        if ( !initialized ) {
            console.log( 'initializing panel=%o', elem );
            elem.data( 'initialized ', true );
            
            var view = elem.find( 'div.view' );
            
            
            if ( view.length ) {
                jsPlumb.draggable( view );
                var endpoint = jsPlumb.addEndpoint( view , {
                    isSource: true,
                    isTarget: true
                });
            }
        }
        else {
            jsPlumb.repaintEverything();
        }
    }
        
    $( '#tabs' ).tabs({
        show: function(event, ui) {
            init( ui.panel );
        }
    });
});