JSFiddle - React, Tailwind, and code Playground

by Tomek

HTML

<div id="content-list">
    <div id="item-1" class="content-wrapper">Item 1</div>
    <div id="item-2" class="content-wrapper">Item 2</div>
    <div id="item-3" class="content-wrapper">Item 3</div>
    <div id="item-4" class="content-wrapper">Item 4</div>
    <div id="item-5" class="content-wrapper">Item 5</div>
    <div id="item-6" class="content-wrapper">Item 6</div>
</div>

<div id="rank-list">
    <div id = "pipeline-rank-row-1" class="pipeline-rank-row">
        <div class="pipeline-rank-number">1</div>
        <div id = "pipeline-rank-1" class="pipeline-holder holder-empty"></div>
        <div class ="remember-my-position-dropped"></div>
        <div class ="remember-my-position-hover"></div>
    </div>
    <div id = "pipeline-rank-row-2" class="pipeline-rank-row">
        <div class="pipeline-rank-number">2</div>
        <div id = "pipeline-rank-2" class="pipeline-holder holder-empty"></div>
        <div class ="remember-my-position-dropped"></div>
        <div class ="remember-my-position-hover"></div>
    </div>
    <div id = "pipeline-rank-row-3" class="pipeline-rank-row">
        <div class="pipeline-rank-number">3</div>
        <div id = "pipeline-rank-3" class="pipeline-holder holder-empty"></div>
        <div class ="remember-my-position-dropped"></div>
        <div class ="remember-my-position-hover"></div>
    </div>
    <div id = "pipeline-rank-row-4" class="pipeline-rank-row">
        <div class="pipeline-rank-number">4</div>
        <div id = "pipeline-rank-4" class="pipeline-holder holder-empty"></div>
        <div class ="remember-my-position-dropped"></div>
        <div class ="remember-my-position-hover"></div>
    </div>
    <div id = "pipeline-rank-row-5" class="pipeline-rank-row">
        <div class="pipeline-rank-number">5</div>
        <div id = "pipeline-rank-5" class="pipeline-holder holder-empty"></div>
        <div class ="remember-my-position-dropped"></div>
        <div class ="remember-my-position-hover"></div>
    </div>
   ...

CSS

#rank-list {
float:left;
height: 452px;
width: 200px;
background: #F7F7F7;
padding: 5px;
border: 1px solid #999999;
}
#content-list {
float:left;
height: 452px;
width: 200px;
border: 1px solid #999999;
padding: 5px;
overflow: auto;
margin-right:20px;
}
.content-wrapper {
    border: 1px solid #DADADA;
    height:52px;
    text-align:center;
    vertical-align:middle;
    margin-bottom:3px;
    background: #FFFFFF;
}
#rankDrag {width:200px;}
.pipeline-rank-number {
    width:12px;
    height: 50px;
    border: 1px solid #AFAFAF;
    background: #AFAFAF;
    color: #FFFFFF;
    font-weight:bold;
    float:left;
    text-align:center;
    line-height:50px;
    font-size:11px;
}

.pipeline-holder {
    height:52px;
    padding:-1px;
    margin-bottom:3px;
    margin-left:16px;
}

.holder-empty {border: 1px dashed #DADADA;height:50px;}

.remember-my-position-dropped {
    position:absolute; 
    right:0;
    margin-top:-40px;
    margin-right:20px;
    color: red;
}
.remember-my-position-hover {
    position:absolute;
    right:0;
    margin-top:-30px;
    margin-right:20px;
    color:green;
}

JavaScript

$(".content-wrapper").draggable({
     revertDuration: 10,
        helper: function(){
            var container = $('<div/>').attr('id', 'rankDrag');
            container.append($(this).clone());
            return container; 
        },
       appendTo: 'body',
        start: function(e, ui) {
            $(this).hide();
            ui.helper.width($('#stack-rank .content-wrapper').width());
        },
        stop: function(e, ui) {
            $(this).show()
                .parents('.pipeline-holder').removeClass('holder-empty');
        },
        drag: function(e, ui) {
            $(this).parents('.pipeline-holder').addClass('holder-empty');
        }
     });

$(".pipeline-holder" ).droppable({
        activeClass: "ui-holder-highlight",
        hoverClass: "u-holder-active",
        tolerance: "pointer",
        over: function( event, ui ) {
            rearrange($(this));
        },
        out: function( event, ui ) {
            resetPositions();
        },
        drop: function( event, ui ) { 
            var dragid = ui.draggable.attr("id"),
                $this = $(this),
                dropid = $this.attr("id"),
                isEmpty = $this.hasClass('holder-empty'),
                next = $this.parents('.pipeline-rank-row').next().find('.pipeline-holder'),
                isNextEmpty = next.hasClass('holder-empty');

             if (isEmpty) {
                 $this.append(ui.draggable);
                 $this.removeClass('holder-empty');
                 $this.siblings('.remember-my-position-dropped').html(dragid);
                 $('.pipeline-holder').each(function(){
                     var $this = $(this),
                         tid = $this.attr('id'),
                         cid = $this.siblings('.remember-my-position-hover').html();
                     
                     if (tid == dropid) {
                         $this.siblings('.remember-my-position-dropped').html(dragid);
                     } else {
                 ...