JSFiddle - React, Tailwind, and code Playground

by nikita_turing

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/jquery.ui.all.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="http://burning-water.org/artbutler/kon_short_js.js"></script>
<script src="https://rawgit.com/mholt/PapaParse/master/papaparse.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script>
<div id="header">
    <input id="but_add_element" type=button value="Add Element"></input>
    <input id="but_load_csv" type=button value="Load CSV"></input>
</div>
<div id="starter" />
<!--<div id="draggable" class="alert alert-info" role="alert">
    <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
    </button>
    <p>_____________</p>
</div>-->

CSS

body {
    background-color:lightgrey;
    background-image: linear-gradient(white 0px, transparent 1px), linear-gradient(90deg, white 0px, transparent 1px), linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .3) 1px, transparent 1px);
    background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px
}
#starter{
    width:10px;
    height:10px;
    background:green;
    margin-top: 15px;
        
}

.csv_cols {
    height: 70px;
    background: lightblue;
    max-width: 150px;
    border: 1px white solid;
    width: 150px;
}
.handle {
    background: green !important;
    width: 100%;
}
#header {
    background: gray;
    height:35px;
}
#header input {
    margin: 5px;
}
#draggable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
    top: 40px;
}

JavaScript

/************** VIEW*/

$(function () {
    $("#draggable").draggable({
        handle: "p",
        grid: [5, 5]
    });
});


/* ADD ELEMENT  */
$("#but_load_csv").on("click", function () {

    csv_json = Papa.parse(ab_test_csv());
    explode_csv(csv_json);

});


/* Load CSV  */
$("#but_add_element").on("click", function () {});

/**************CONTROL*/

function explode_csv(data) {
    header = data.data[0];
    window.last_elem = $('#starter');
    
    $.each(header, function (i, v) {
        var close_but = '<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>';

        var select = jQuery("#starter");
        /*var handle = '<div class="handle">' + close_but + '</div>'*/
        var le_div = '<div>'   
        window.last_elem = jQuery(le_div, {
            class: "csv_cols",
            value: "ja",
            html: v + close_but
        }).uniqueId().appendTo(select).position({
            my: 'left top',
            at: 'right+10 top',
            of: window.last_elem,
            offset: "50 100",
            collision: "fitflip"
            
          });//.draggable({
           // grid: [5, 5]
       // });
        
        jsPlumb.draggable($(window.last_elem),{
            grid: [15, 15]
       });
        makeSourceAndTarget(window.last_elem);

    });

}


/*JS_PLUMB*/


//Makes the element a source as well as target for connections
function makeSourceAndTarget(element) {
    
    var connectorPaintStyle = {
		lineWidth:4,
		strokeStyle:"#61B7CF",
		joinstyle:"round",
		outlineColor:"white",
		outlineWidth:2
	};
	// .. and this is the hover style. 
	var connectorHoverStyle = {
		lineWidth:4,
		strokeStyle:"#216477",
		outlineWidth:2,
		outlineColor:"white"
	};
    
	var endpointHoverStyle = {
		fillStyle:"#216477",
		strokeStyle:"#216477"
	};
	// the definition of source endpoints (the small blue ones)
	var sourceEndpoint =...