JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-3">
             <h4>Class Info</h4>

            <div class="row">
                <div id="studentsNotInChart" class="col-xs-12 text-left">
                    <div id='student_1' class='btn btn-primary student ui-widget-content ui-draggable'>Wilma Flinstone</div>
                    <div id='student_2' class='btn btn-primary student ui-widget-content ui-draggable'>Betty Rubble</div>
                </div>
            </div>
        </div>
        <div class="col-xs-9">
             <h4>Seating Chart - Reading</h4>

            <div class="row">
                <div id="seatingChartContainer" class="col-xs-12 well well-sm">
                    <!--divs will be added here -->
                    <div id="seatingChart" class="">
                        <!-- these below are test divs. delete them! -->
                        <div id="hardcodedSeat_1" class='col-xs-2 studentProfile'>
                            <div class="studentProfileInner">
                                <img src=" https://www.gravatar.com/avatar/480201be6b1f33f9326e28040ad47a8d?s=48&amp;d=identicon&amp;r=PG " width="24 " height="24 " />
                                <br />Student 1</div>
                        </div>
                        <div id="hardcodedSeat_2 " class='col-xs-2 studentProfile'>
                            <div class="studentProfileInner">
                                <img src="Pictures/testPicture.jpg " width="24 " height="24 " />
                                <br />Student 2</div>
                        </div>
                        <div id="hardcodedSeat_3 " class='col-xs-2 studentProfile'>
                            <div class="studentProfileInner">
                                <img src="Pictures/testPicture.jpg " width="24 " height="24 " />
                                <br...

CSS

.dropStudentsHere {
    height: 300px;
    z-index: 400;
}
.student {
    display: block;
    width: 100%;
    z-index: 500;
    margin:5px 0;
}
.studentProfileInner {
    padding: 3px;
    margin:3px;
    border: 1px solid #999;
    border-radius: 4px;
    width:100%;
}

JavaScript

$(document).ready(function () {

    $("#student_1").draggable();
    $("#student_2").draggable();

    $("#hardcodedSeat_1").draggable();
    $("#hardcodedSeat_2").draggable();
    $("#hardcodedSeat_3").draggable();

    //add drop event
    $("#dropThingy").droppable();
});