JSFiddle - React, Tailwind, and code Playground

by ken tsai

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://jsplumbtoolkit.com/js/dom.jsPlumb-1.6.2-min.js"></script>
<body>
<div  id="main">
    <div id="node0" class="node">node 0</div>
    <div id="node1" class="node">node 1</div>
</div>
<div>
    <input type='button' value='Save' onclick='Save()'>
    <input type='button' value='Load' onclick='Load()'>
    <input type='button' value='Clear' onclick='Clear()'>

</div>
</body>

CSS

.node {
    border:1px solid black;
    position:absolute !important;
    width:5em;
    height:5em;
    padding: 0.5em;
    z-index:1;
    border-radius:0.5em;
    box-shadow: 2px 2px 19px #aaa;
    background: white;
}

#node0 { top:10em; left:22em;}
#node1 { top:15em; left:32em;}

JavaScript

$(document).ready(function() {

    DragEl(".node");
    ResizeEl(".node");
    Repaint();
    Line("node0", "node1")

});

//// functions ////

// repaint
    function Repaint(){
        $("#main").resize(function(){
            jsPlumb.repaintEverything();
        });
    }
// размер
    function ResizeEl(el){
        $(el).resizable();
    }
// drag
    function DragEl(el){
        jsPlumb.draggable($(el));
    }

// save
function Save() {
        $(".node").resizable("destroy");
        Objs = [];
        $('.node').each(function() {
            Objs.push({id:$(this).attr('id'), html:$(this).html(),left:$(this).css('left'),top:$(this).css('top'),width:$(this).css('width'),height:$(this).css('height')});
        });
        console.log(Objs);
    }

// load
    function Load() {
        var s="";
        for(var i in Objs) {
            var o = Objs[i];
            console.log(o);
            s+='<div id="'+ o.id+'" class="node" style="left:'+ o.left+'; top:'+ o.top+'; width:'+ o.width +'; height:'+ o.height +' "> '+ o.html+'</div>';
        }
        $('#main').html(s);

        ResizeEl(".node");
        DragEl(".node");
        Line("node0", "node1")
    }

// connection
    function Line(el1, el2){
        var e0 = jsPlumb.addEndpoint(el1),
            e1 = jsPlumb.addEndpoint(el2);
        jsPlumb.connect({ source:e0, target:e1 });
    }

// clear
    function Clear() {
        jsPlumb.reset();
        $('.node').remove();
        $('.point').remove();
    }