JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<body style="margin:0; background-color: #F2F2F2;">
    <!--Header-->
    <div id="header">
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

                    </button> <a class="navbar-brand" href="/">Welcome to Kanban View</a>

                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#" data-toggle="modal" data-target="#myModal" data-whatever="Delivery Hours">Add Card</a>

                        </li>
                        <li><a href="KanbanprojectStatus">Project Status</a>

                        </li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </div>
    </div>
    <div class="container" style="width:900px; height:500px;padding-top:70px;">
        <div class="row">
            <div class="col-md-3">
                 <h4>Ready to Start</h4>

                <ul title="Ready to Start" id="lane_192025152_contents" laneid="192025152" style="height: 512px; -webkit-user-select: none;" class="cmVoice  laneContents connectedSortable  ui-sortable" cmenu="menu_LaneBody">
                    <div draggable="true">
                        <li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card  cmVoice  {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
                            <div class="card-background"...

JavaScript

var onDragEnter = function (event) {
         event.preventDefault();
         $("#dropzone").addClass("dragover");
     },
     onDragOver = function (event) {
         event.preventDefault();
         if (!$("#dropzone").hasClass("dragover")) $("#dropzone").addClass("dragover");
     },
     onDragLeave = function (event) {
         event.preventDefault();
         $("#dropzone").removeClass("dragover");
     },

     onDrop = function (event) {
         event.preventDefault();
         $("#dropzone").removeClass("dragover");

         var ul = $(this).find('ul')[0];
         console.log(ul);
         if (dragItem) {
             ul.appendChild(dragItem);
         }
     };

     var dragItem;
     $("div")
         .on("dragstart", function (event) {
         dragItem = $(event.currentTarget).find('li') && $(event.currentTarget).find('li')[0];
     });

     $("#dropzone")
         .on("dragenter", onDragEnter)
         .on("dragover", onDragOver)
         .on("dragleave", onDragLeave)
         .on("drop", onDrop);