JSFiddle - React, Tailwind, and code Playground

by Nibin George

HTML

<link rel="stylesheet" href="http://jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-md-4" id="policyList">
            <ul class="draggable Fruits ">
                <li class="Heading"><strong>Fruits</strong>

                </li>
                <li class="item rule1">Apple</li>
                <li class="item rule1">Mango</li>
                <li class="item rule1">Banana</li>
                <li class="item rule1">Pineapple</li>
            </ul>
            <ul class="draggable Celebrities ">
                <li class="Heading"><strong>Celebreties</strong>

                </li>
                <li class="item ">Aishwarya</li>
                <li class="item ">Kangna</li>
                <li class="item ">Deepika</li>
                <li class="item ">Dia</li>
            </ul>
            <ul class="draggable Mobiles ">
                <li class="Heading "><strong>Mobile Phones</strong>

                </li>
                <li class="item ">I-Phone</li>
                <li class="item ">Samsung</li>
                <li class="item ">Nokia</li>
                <li class="item ">Motorolla</li>
            </ul>
        </div>
        <div class="col-md-4" id="Rule1">
            <label class="label-default">Step 1</label>
            <ul id='Rule1List' class=""></ul>
            <label class="label-default">Step 2</label>
            <ul id='Rule2List' class=""></ul>
            <label class="label-default">Step 3</label>
            <ul id='Rule2List' class=""></ul>
        </div>
    </div>
</div>

CSS

body {
    font-family:"Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
    font-size: 62.5%;
}
.draggable > item {
    //background: #464646;
    // padding: 10px;
}
ul .Heading {
    font-size: 15px;
    //font-weight: bold;
    text-align: center;
    list-style-type: none;
    padding: 5px;
    text-align: center;
    color: #474747;
}
.item {
    cursor: all-scroll;
    border-bottom: solid 1px #D2D9E4;
    color: #333333;
    background: #F6F6F6;
    width: 100%;
    padding: 3px;
    font-size: 14px;
    //border: solid 1px white;
    list-style-type: none;
}
.draggable {
    margin: 0px;
    padding: 0px;
    //width: 200px;
    //background: #B1D0B1;
}
#policyList {
    padding: 0;
    margin: 0;
    border: solid 1px #474747;
}
#Rule1List, #Rule2List, #Rule3List {
    height: 100px;
    border: solid 1px #DDDBE9;
}
#Rule1 >ul {
    padding: 0;
    margin: 0;
}
.label-default {
    font-size: 12px;
}
.highlight {
    background: #ECECEC;
}
.Selected {
    color: white;
    background: #E66454;
}

JavaScript

$(function () {
    var policyList = [];

    $(".item").draggable({
        helper: "clone",
        revert: "invalid",
        cursor: "all-scroll "
    });

    $(document.body).on("click", ".close", function (argument) {
        var index = $.inArray($.trim($(this).parent().text()), policyList);
        policyList.splice(index, 1);
        //Remove the array element
        $(this).parent().remove();
        //console.log("After Removing "+ policyList);
    });
    $("#Rule1List,#Rule3List,#Rule2List").droppable({
        activeClass: "highlight",

        drop: function (event, ui) {

            var index = $(ui.draggable).closest('.draggable ').index();
            if ($(".ui-droppable li[set='" + index + "']").length > 0) {
                return false;
            }
            //If user has already selected three policies
            if (policyList.length == 3) {
                return false;
            } else {
                policyList.push($.trim(ui.draggable.text()));
                $(this).append('<li set = "' + index + '" class= "Selected ' + ui.draggable.eq(0).attr("class") + '"> ' + ui.draggable.text() + ' <button type="button" class="close" data-dismiss="item" aria-label="Close"><span aria-hidden="true">×</span></button></li>');
            }
        }
    });


});