JSFiddle - React, Tailwind, and code Playground

by sporritt

HTML

<script src="http://jsplumb.org/js/jquery.jsPlumb-1.3.16-all.js"></script>
<div id="wrapper">
    <div id="options">
        <div id="window1" class="window" ></div> <!-- end of window1 -->
        <div id="window2" class="window"></div> <!-- end of window2 -->
        <div id="window3" class="window" ></div> <!-- end of window3 -->
        <div id="window4" class="window" ></div> <!-- end of window4 -->
        <div id="window5" class="window" ></div> <!-- end of window5 -->
    </div><!-- end of options -->
    <div id="frame">

    
    </div><!-- end of frame -->
</div><!-- end of wrapper -->

CSS

body {
      text-align: center;
}
#wrapper {
      text-align: left;
      width: 720px;
      margin-left: auto;
      margin-right: auto;
}

#options{
    width: 200px;
    height:550px;
    border:1px solid black;
    float:left;
}

#frame{
    width:513px;
    height:550px;
    //background-image: url("../images/UK-Map.gif");
    background-repeat: repeat-y;
        background-position: 0 0;
        border:1px solid black;
        float:right;
}

#tbldevs{
    border:1px solid black;
    width:80%;
    margin-left:50px;
    margin-top:10px;
}

#tbldevs th{
    text-align:center;
    height:50px;
    width:50px;
}

#tbldevs td{
    height:50px;
}

/*
#window1 {
    margin-left:15px;
    margin-top:15px;
    background-image: url("../images/cf_32x32.png");
    width:32px;
    height:32px;
}

#window2 {
    margin-left:15px;
    margin-top:15px;
    background-image: url("../images/dw_32x32.png");
    width:32px;
    height:32px;
}

#window3 {
    margin-left:15px;
    margin-top:15px;
    background-image: url("../images/fla_32x32.png");
    width:32px;
    height:32px;
}

#window4 {
    margin-left:15px;
    margin-top:15px;
    background-image: url("../images/flex_32x32.png");
    width:32px;
    height:32px;
}

#window5 {
    margin-left:15px;
    margin-top:15px;
    background-image: url("../images/pdf_32x32.png");
    width:32px;
    height:32px;
}

#window6 {
    margin-left:15px;
    margin-top:15px;
    background-image: url("../images/ps_32x32.png");
    width:32px;
    height:32px;
}*/

.ui-draggable-helperMoving {
    border: 1px dotted #000;
    padding: 6px;
    background: #fff;
    font-size: 1.2em;
    width:100px;
    height:100px;
}

.ui-draggable-helperStoped {
    border: 1px solid #000;
    width:5px;
    height:5px;
}



/* classes for dragged stuff */
.dragged1 {
    border:1px solid #346789;
box-shadow: 2px 2px 19px #aaa;
   -o-box-shadow: 2px 2px 19px #aaa;
   -webkit-box-shadow: 2px 2px 19px #aaa;
   -moz-box-shadow: 2px 2px 19px...

JavaScript

//Setting up drop options
targetDropOptions = {
    tolerance: 'touch',
    hoverClass: 'dropHover',
    activeClass: 'dragActive'
};

//Setting up a Target endPoint
targetColor = "#316b31";
targetEndpoint = {
    endpoint: ["Dot",
    {
        radius: 8}],
    paintStyle: {
        fillStyle: targetColor
    },
    //isSource:true,
    scope: "green dot",
    connectorStyle: {
        strokeStyle: targetColor,
        lineWidth: 8
    },
    connector: ["Bezier",
    {
        curviness: 63}],
    maxConnections: 3,
    isTarget: true,
    dropOptions: targetDropOptions
};

//Setting up a Source endPoint
sourceColor = "#ff9696";
sourceEndpoint = {
    endpoint: ["Dot",
    {
        radius: 8}],
    paintStyle: {
        fillStyle: sourceColor
    },
    isSource: true,
    scope: "green dot",
    connectorStyle: {
        strokeStyle: sourceColor,
        lineWidth: 8
    },
    connector: ["Bezier",
    {
        curviness: 63}],
    maxConnections: 3,
    //isTarget:true,
    //dropOptions : targetDropOptions
};
$(document).ready(function() {
    //Counter
    counter = 0;
    //Make element draggable
    $(".window").draggable({
        helper: 'clone',
        containment: 'frame',

        //When first dragged
        stop: function(ev, ui) {
            var pos = $(ui.helper).offset();
            //alert(pos.left);
            objName = "#clonediv" + counter
            $(objName).css({
                "left": pos.left,
                "top": pos.top
            });
            $(objName).removeClass("window");


            //When an existiung object is dragged
            $(objName).draggable({
                containment: 'parent',
                stop: function(ev, ui) {
                    var pos = $(ui.helper).offset();
                }
            });
        }
    });
    //Make element droppable
    $("#frame").droppable({
        drop: function(ev, ui) {

            if (ui.helper.attr('id').search(/window[0-9]/) != -1) {
               ...