JSFiddle - React, Tailwind, and code Playground

by mstefanko

HTML

<div id="top-nav">
    <span>Stages</span>
    <span>Lists</span>
    <span>Dashboard</span>
    <span>Configure</span>   
</div>

<div class="stage-wrapper">
    <div class="stage-header">
      <span id="stage-header-name">Stage 1</span>
      (<span id="stage-header-count">1</span>)
    </div>
    <div id="stage1" class="stage-content">
        <div id="stage1-content-1" class="content-wrapper status-active">
            <div id="handle"></div>
          <div id="state" class="active"></div>
            <div id="content-inside">
                <div class="content-id"><a href="">D1338</a></div>
                <div class="content-name">Conjunctivitis Remover Long Title that goes</div>
            </div>
        </div>

    </div>
</div>
<div class="stage-wrapper">
   <div class="stage-header">
      <span id="stage-header-name">Stage 2</span>
      (<span id="stage-header-count">4</span>)
    </div>
    <div id="stage2" class="stage-content">
       <div id="stage2-content-1" class="content-wrapper status-active">
            <div id="handle"></div>
          <div id="state" class="active"></div>
            <div id="content-inside">
                <div class="content-id"><a href="">D1338</a></div>
                <div class="content-name">Conjunctivitis Remover</div>
            </div>
        </div>

        <div id="stage2-content-2" class="content-wrapper status-active">
            <div id="handle"></div>
          <div id="state" class="active"></div>
            <div id="content-inside">
                <div class="content-id"><a href="">D1338</a></div>
                <div class="content-name">Conjunctivitis Remover</div>
            </div>
        </div>
     
        <div id="stage2-content-3" class="content-wrapper status-active">
            <div id="handle"></div>
          <div id="state" class="active"></div>
            <div id="content-inside">
                <div class="content-id"><a href="">D1338</a></div>
                <div...

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;
height: 500px;
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;
    padding: 10px;
    font-weight: bold;
    font-size: 13px;
    font-family: arial;
}
.stage-content {
    padding: 4px;
    height: 100%;
}

#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;}
#state {float:left; width: 2px; height: 50px;}
.active {background-color: #169c00;}
.pause {background-color: orange;}
.stop {background-color: red;}

.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;}
#stage-status-wrapper {display: block;width:600px;margin-left: 20%}
.stage-status {float:left;padding:20px 50px 20px 50px;border: 1px solid #C8C8C8;margin-top: 20px;}
.content-selected {background: #454545;}
#create-stage-wrapper {
    border: 2px dashed #C8C8C8;
    box-shadow: 0 0 0;
}
.status-selected {
background: #efefef; /* Old browsers */
background: -moz-linear-gradient(top,  #efefef 0%, #ffffff 100%) !important; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef),...

JavaScript

$(document).ready(function() {

    var selectedClass = 'ui-stage-content-selected',
        clickDelay = 600,
        // click time (milliseconds)
        lastClick, diffClick; // timestamps

    $(".content-wrapper")
    // Script to deferentiate a click from a mousedown for drag event
    .bind('mousedown mouseup', function(e) {
        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
                $(this).toggleClass(selectedClass);
            }
        }
    })
    .draggable({
        revertDuration: 10,
        helper: function(event) {
                $('.' + selectedClass).each(function(){
	        		$(this).clone().appendTo('.selectedlist');
	        	});
                var result = '<div>'+ $('.selectedlist').html()+'</div>';
                return result;

            },
        start: function(e, ui) {
            ui.helper.addClass(selectedClass);
           
        },
        stop: function(e, ui) {
            // reset group positions
            $('.' + selectedClass).css({
                top: 0,
                left: 0
            });
             var id= $('.selected').parents('.stage-content').attr('id');
             var parent = $('#'+id).parent('.stage-content').attr('id');
             $('#dragged-to').html(parent);
             var draggedTo = $('#dragged-to').html();
             var draggedFrom = $('#dragged-from').html();
             
            if(draggedTo != draggedFrom){
            var draggedToCount = $('#' + draggedTo).parents('.stage-wrapper').find('#stage-header-count').html();
            var draggedFromCount = $('#' + draggedFrom).parents('.stage-wrapper').find('#stage-header-count').html();
             $('#' +...