JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-sm-4 col-md-3 sidebar">
            <div class="unsortedList panel panel-default">
                <div class="panel-heading">
                    Not assigned
                </div>
                <div class="panel-body">
                    <ul id="0" class="list-unstyled connectedLists">
                        <li class="panel panel-primary innerpanel" id="student_1_id">
                            <input type="hidden" name="student_1_id" value="0">
                            <div class="panel-body">
                                Student 1 Name
                            </div>
                        </li>
                        <li class="panel panel-primary innerpanel" id="student_2_id">
                            <input type="hidden" name="student_2_id" value="0">
                            <div class="panel-body">
                                Student 2 Name
                            </div>
                        </li>
                        <li class="panel panel-primary innerpanel" id="student_3_id">
                            <input type="hidden" name="student_3_id" value="0">
                            <div class="panel-body">
                                Student 3 Name
                            </div>
                        </li>
                        <li class="panel panel-primary innerpanel" id="student_4_id">
                            <input type="hidden" name="student_4_id" value="0">
                            <div class="panel-body">
                                Student 4 Name
                            </div>
                        </li>
                        <li class="panel panel-primary innerpanel" id="student_5_id">
                            <input...

CSS

body {
        padding-top: 60px;
        padding-bottom: 40px;
    }

    @media (min-width: 768px) {
      .sidebar {
        position: fixed;
        top: 51px;
        bottom: 0;
        left: 0;
        padding: 20px;
    overflow: hidden;
      }
    }

JavaScript

$(document).ready(function(){
  $('.sidebar').css('overflow-y','scroll');
    jQuery(function(event, ui) {
        $('.connectedLists').sortable({
            connectWith: ".connectedLists",
            stop: function(event, ui) {          
                item = ui.item;
                var newList = item.closest("ul");
                var group = newList.attr('id');
                var formField = item.find("input");
                formField.val(group);
            },
            appendTo: 'body',
            helper:  function(e, elt) {
                $(elt).css('list-style-type','none');
                return elt.clone(true);
            }
        });
    });
});

$('.unsortedList li.panel').mousedown(function(){
 $('.sidebar').css('overflow-y','');
});


$('.unsortedList li.panel').mouseup(function(){
 $('.sidebar').css('overflow-y','scroll');
});