JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<div class="featureWrapper">
    <div class="info expanded" data-parentid="23" data-isfeature="true">
        <div class="featureName">AwesomeFeature</div>
    </div>
    <div class="featureOrgListWrapper">
        <div class="featureOrgDataWrapper">
            <div id="featureOrg1" class="featureOrgWrapper">
                <div class="info collapsed droppable clearfix" data-parentid="1" data-isfeature="false">
                    <div class="featureOrgName">Sub Awesome 1</div>
                </div>
                <div class="featureOrgListWrapper hide">
                </div>
            </div>
        </div>
        <div class="featureOrgDataWrapper">
            <div id="featureOrg2" class="featureOrgWrapper">
                <div class="info collapsed droppable clearfix" data-parentid="2" data-isfeature="false">
                    <div class="featureOrgName">Sub Sauce 2</div>
                </div>
                <div class="featureOrgListWrapper hide"></div>
            </div>
        </div>
    </div>
</div>
<br /><br /><br /><br />

<table id="tablecontainer">
    <tbody>
         <tr data-id="1" class="selected">
             <td>test1</td>
        </tr>
         <tr data-id="2">
             <td>test2</td>
        </tr>
         <tr data-id="3" class="selected">
             <td>test3</td>
        </tr>
         <tr data-id="4">
             <td>test4</td>
        </tr>
    </tbody>
</table>

CSS

.droppable 
{
    background: red;
    margin-right: 20px
}

.ui-state-highlight {
    background: blue;
}

div.info {
    border-top: 1px solid #DDDDDD;
    cursor: pointer;
    height: 100px;
    max-height: 25px;
    padding: 4px 0;
}

div.featureOrgName {
    float: left;
}

.selected {
    background: grey;
}

.featureWrapper {
    background-color: #EEEEEE;
    margin-bottom: 0px;
}

.featureOrgListWrapper {
    background: none repeat scroll 0 0 #EEEEEE;
    border-left: 16px solid #e4e4e4;
}

.featureOrgTaskWrapper {
    border-left: 16px solid #e4e4e4;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

JavaScript

var taskSelected = $("#tablecontainer tr.selected").length;

$("#tablecontainer tr.selected").draggable({
    cursor: "move",
    cursorAt: { top: -12, left: -20 },
    helper: function(event) {
        return $("<div class='ui-widget-header'>" + taskSelected  + " Tasks selected.</div>");
    }
});

$(".featureOrgDataWrapper .droppable").droppable({
    activeClass: "ui-state-highlight"
    , drop: function (event, ui) {
        //alert("success");
        console.log($(this));
        console.log(taskSelected);
        console.log(event);
        console.log(ui.draggable);
    }
});