JSFiddle - React, Tailwind, and code Playground

by writetobhuwan

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>
    <div id="pipeline-rank-row-6"...

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();
        $('#rankDrag').width($('#stack-rank .content-wrapper').width());
    },
    stop: function (e, ui) {
        $(this).show();
        $(this).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).attr('id'));
    },
    out: function (event, ui) {
        resetPositions();
    },
    drop: function (event, ui) {
        var dragid = ui.draggable.attr("id");
        var dropid = $(this).attr("id");
        var isEmpty = $(this).hasClass('holder-empty');
        var next = $(this).parents('.pipeline-rank-row').next().find('.pipeline-holder');
        var 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 tid = $(this).attr('id');
                var cid = $(this).siblings('.remember-my-position-hover').html();

                if (tid == dropid) {
                    $(this).siblings('.remember-my-position-dropped').html(dragid);
                } else {
                    if (cid) {
                        $(this).siblings('.remember-my-position-dropped').html(cid);
                    }
                    var hasContent = $(this).find('.content-wrapper').length;
                    if (hasContent) {
   ...