JSFiddle - React, Tailwind, and code Playground

by Anand Rathod

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="sprintcontainer">
    <div class="task-list task-container ui-droppable ui-sortable ui-state-highlight" id="backlog">
         <h3 class="ui-sortable-handle">Backlog</h3>

        <div style="opacity: 1;" class="todo-task ui-sortable-handle">
            <div class="task-header">
                <div class="task-no">30</div>
                <div class="task-type">Action</div>
            </div>
            <div class="task-body">
                <div class="task-title">Meet with technical teams to discuss solution</div>
            </div>
            <div class="task-footer">
                <div class="task-date">Due: 17/07/2012</div>
            </div>
        </div>
        <div class="todo-task ui-sortable-handle">
            <div class="task-header">
                <div class="task-no">61</div>
                <div class="task-type">Action</div>
            </div>
            <div class="task-body">
                <div class="task-title">Test Risk Action 504</div>
            </div>
            <div class="task-footer">
                <div class="task-date">Due: 12/06/2014</div>
            </div>
        </div>
        <div class="todo-task ui-sortable-handle">
            <div class="task-header">
                <div class="task-no">62</div>
                <div class="task-type">Action</div>
            </div>
            <div class="task-body">
                <div class="task-title">Test Issue Action 662</div>
            </div>
            <div class="task-footer">
                <div class="task-date">Due: 12/06/2014</div>
            </div>
        </div>
        <div class="todo-task ui-sortable-handle">
            <div class="task-header">
                <div class="task-no">64</div>
                <div class="task-type">Action</div>
            </div>
            <div class="task-body">
                <div class="task-title">Test Dependency Action 35</div>
  ...

CSS

#sprintcontainer {
    margin: 0 auto;
    width: 100%;
    min-height: 100%;
    background-color: transparent;
    border: 0;
}
.highlight {
    border: 1px solid yellow;
    background-color:yellow;
}
.task-list {
    background-color: white;
    border-left: 2px solid #D8D8DC;
    border-right: 2px solid #D8D8DC;
    border-top: 3px solid #D8D8DC;
    border-bottom: 3px solid #D8D8DC;
    box-shadow: 0 1px 1px 0 rgba(50, 50, 50, 0.75);
    float: left;
    height: 100%;
    margin: 0;
    min-height: 240px;
    padding: 15px;
    text-align: center;
    width: 22%;
}
.task-list input, .task-list textarea {
    width: 240px;
    margin: 1px 5px;
}
.task-list input {
    height: 30px;
}
.todo-task {
    margin: 5px;
    padding: 5px;
}
.task-body {
    background-color: #EBEBEB;
    width: 100%;
    min-height:40px;
    clear: both;
}
.task-header {
    background-clip: padding-box;
    background-color: #343434;
    border-radius: 2px 2px 0 0;
    color: white;
    font-family:"Lato", sans-serif;
    font-size: 15px;
    height: 22px;
    position: relative;
}
.task-footer {
    background-clip: padding-box;
    background-color: #EBEBEB;
    border-radius: 0 0 2px 2px;
    color: gray;
    height: 22px;
    position: relative;
}
.task-no {
    float:left;
    padding: 2px;
}
.task-type {
    float:left;
    padding: 2px;
}
.task-date {
    float:left;
    padding: 2px;
}
.task-list input[type="button"] {
    width: 100px;
    margin: 5px;
}
.todo-task > .task-header {
    font-weight: bold;
}
.todo-task > .task-date {
    font-size: small;
    font-style: italic;
}
.todo-task > .task-description {
    font-size: smaller;
}
h3 {
    text-align: center;
}
#delete-div {
    display: none;
    background-color: #fff;
    border: 3px dotted #000;
    margin: 10px;
    height: 75px;
    line-height: 75px;
    text-align: center;
}

JavaScript

var $container = $(".task-container");
var $task = $('.todo-task');

$task.draggable({
    addClasses: false,
    connectToSortable: ".task-container",
});

$container.droppable({
    accept: ".todo-task"
});


$(".ui-droppable").sortable({
    placeholder: "ui-state-highlight",
    opacity: .5,
    helper: 'original',
    beforeStop: function (event, ui) {
        newItem = ui.item;
    },
    receive: function (event, ui) {

    }
}).disableSelection().droppable({
    over: ".ui-droppable",
    activeClass: 'highlight',
    drop: function (event, ui) {
        $(this).addClass("ui-state-highlight");
    }
});