JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.nerdydork.com/demos/dragscroll/jquery.aautoscroll.2.4.js"></script>
<div id="posx">
</div>
<table>
<tr class="drag_me">
    <td>drag me</td>
</tr>
<tr class="drag_me">
    <td>drag me</td>
</tr>
<tr class="drag_me">
    <td>drag me</td>
</tr>
<tr class="drag_me">
    <td>drag me</td>
</tr>
</table>

<div class="upper"></div>
<div class="drop_area">
<ul>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
    <li class="drop_on_me">drop here</li>
</ul>
</div>
<div class="lower"></div>

CSS

.drop_area {
    height: auto;
    max-height: 100px;
    overflow-y: scroll;
    border: 1px solid black;
    position: relative;
}

.hover {
    background-color: #CCC;            
}
.upper, .lower {
    height: 16px;
    position: fixed;
    width: 100%;
    background: rgba(50, 50, 50, .5);
    z-index: 10;
}
.lower {margin-top: -16px;}
.active {
    border: 1px solid yellow;
        
}

JavaScript

var ev = $(window).mousemove();
$('#posx').innerHtml(ev.pageX);

$(ev);