JSFiddle - React, Tailwind, and code Playground

by mstefanko

HTML

<div id = "fake-id1" class = "step-wrapper">
		<div class="step-table-header">
			<span class="step-header-name">{{step_name}}</span>
			<div class="step-header-btn"></div>	
		</div>
		<div class="step-table-wrapper">
		    <div class="step-table">
			    <table cellspacing="0">
			    	<thead>
				        <tr>
				          <th></th>
				          <th colspan="2">Title</th>
				          <th>Score</th>
				          <th colspan="2">Completion</th>
				        </tr>
			    	</thead>
			    	<thead>
				        <tr>
				        <th></th>
				          <th colspan="2">Title</th>
				          <th>Version</th>
				        </tr>
			    	</thead>
			    	<tbody id="step-content-container-1" class="step-content-container">
			    	    <tr id="fake-row-id-1" class="step-row">
                            <td id="step-state"></td>
                            <td class="step-table-icon"><img src = "/core/images/"/></td>
                            <td class="step-table-title">TITLE</td>
                            <td class="step-table-score">67</td>
                            <td class="step-table-completion-count">
                                <span>22</span><span> of </span><span>30</span>
                            </td>
                            <td class="step-table-percent-completed">22%</td>
                        </tr>
                        <tr id="fake-row-id-2" class="step-row">
                            <td id="step-state"></td>
                            <td class="step-table-icon"><img src = "/core/images/"/></td>
                            <td class="step-table-title">TITLE</td>
                            <td class="step-table-score">67</td>
                            <td class="step-table-completion-count">
                                <span>22</span><span> of </span><span>30</span>
                            </td>
                            <td class="step-table-percent-completed">22%</td>
                        </tr>
                ...

CSS

#top-nav {display: block;width:600px;height:50px; margin-top:10px;}
#top-nav span {padding: 10px; border: 1px solid #C8C8C8;}

.placeholder {
    border: 1px dashed #C8C8C8;
    background-color: #FFFFFF;
    padding: 10px;
    background: #FFFFFF;
    height: 30px;
    margin-bottom: 1px;
}
.stage-wrapper {
float:left;
/*margin-left:20px;*/
min-height: 450px;
width: 220px;    
background-color: #FFFFFF;
border: 1px solid #C1C1C1;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}
.stage-header {
    border-bottom: 1px solid #C1C1C1;
    font-weight: bold;
    font-size: 13px;
    font-family: arial;
    position:relative;
    background-color: #FFFFFF;
}
#handle {float:left; width: 8px; height: 50px; border-right: 1px solid #dcdcdc; background:url('https://test.brightideatest.com/uploads/biwsrv01/OD2024/D1AD0412.png') no-repeat;}
.img-dropdown {background:url('/core/images/dropdown_hover.png') no-repeat;}
.content-wrapper {
    border: 1px solid #C8C8C8;
    background-color: #FFFFFF;
    height: 50px;
    cursor: move;
    width: 210px;
    margin-bottom: 1px;
}
#content-inside {margin:5px 5px 5px 16px; width: auto; height: 40px;}
.content-id {height: 20px; line-height:20px; font-size: 11px;}
.content-name {height: 20px; line-height:20px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333333;}
.content-selected {background: #454545;}

.stage-header-dropdown {float:right; width: 16px; height: 16px;cursor: pointer;}
#create-stage-wrapper {
    border: 2px dashed #C8C8C8;
    box-shadow: 0 0 0;
    display:none;
}
.stage-spacer{
	width:20px;
	border:0px;
	height:450px;
	float:left
}

#step-container{background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #C1C1C1;
border-radius: 3px 3px 3px 3px; padding: 5px; height: 412px;width: 800px; position: absolute; top:34px; left: 0px; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25); z-index: 1010;}

.stage-dropdown{background: none repeat scroll 0 0...

JavaScript

function stepHandle()
{
	var stepSelected = 'ui-step-content-selected',
	clickDelay = 600,
	// click time (milliseconds)
	lastClick, diffClick; // timestamps

	$(".step-row").unbind('mousedown mouseup');
	// Script to deferentiate a click from a mousedown for drag event
	$(".step-row").bind('mousedown mouseup', function(e) {
		var clickParent = $(this).parents('.step-content-container').attr('id');
	    if (e.type == "mousedown") {
	        lastClick = e.timeStamp; // get mousedown time
	    } else {
            diffClick = e.timeStamp - lastClick;
            if (diffClick < clickDelay) {
                // add selected class to group draggable objects
                $('.' + stepSelected).each(function(){
                    var selectedParent = $(this).parents('.step-content-container').attr('id');
                    if (clickParent != selectedParent){
                        $(this).removeClass(stepSelected);
                    } 
                });
                $(this).toggleClass(stepSelected);
            }
	    }
	});

	$(".step-row").draggable({
	    revertDuration: 10,
	    helper: function(event) {
	        return $('<div class="drag-row"><table><tbody></tbody></table></div>').find('tbody').append($(event.target).closest('tr').clone()).end();
	    },
        start: function(event){
            $(this).hide();
        },
        stop: function(event) {
            $(this).show();
        }
	    // grouped items animate separately, so leave this number low
	});
}

function handleStepEvents()
{
    $(".step-content-container").sortable().droppable({
         activeClass: "ui-create-hover",
    hoverClass: "ui-create-active",
        drop: function(event, ui) {
            $(this).append(ui.draggable);
        }                                               
    });
    /*
	var stepSelected = 'ui-step-content-selected';
	 $(".step-content-container").sortable().droppable({
        activeClass: "ui-step-highlight",
        hoverClass:...