JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ovrigt-container">
    <h2>Ovrigt</h2>
    <ul class="dropList" id="ovrigt">
        <li><img style="height: 16px; width: 16px;" alt="@" src="http://www.imdb.com/favicon.ico"><a href="http://imdb.com">IMDB</a></li>
        <li><img style="height: 16px; width: 16px;" alt="@" src="http://www.imdb.com/favicon.ico"><a href="http://imdb.com">IMDB</a></li>
        <li><img style="height: 16px; width: 16px;" alt="@" src="http://www.imdb.com/favicon.ico"><a href="http://imdb.com">IMDB</a></li>
        <li><img style="height: 16px; width: 16px;" alt="@" src="http://www.imdb.com/favicon.ico"><a href="http://imdb.com">IMDB</a></li>
        <li><img style="height: 16px; width: 16px;" alt="@" src="http://www.imdb.com/favicon.ico"><a href="http://imdb.com">IMDB</a></li>
        <li><img style="height: 16px; width: 16px;" alt="@" src="http://www.imdb.com/favicon.ico"><a href="http://imdb.com">IMDB</a></li>
        <li><img style="height: 16px; width: 16px;" alt="@" src="http://www.imdb.com/favicon.ico"><a href="http://imdb.com">IMDB</a></li>
        <li><img style="height: 16px; width: 16px;" alt="@" src="http://www.imdb.com/favicon.ico"><a href="http://imdb.com">IMDB</a></li>
        
    </ul>
</div>

<div id="games-container">
    <h2>Games</h2>
    <ul class="dropList" id="games">
    </ul>
</div>

CSS

#ovrigt-container {
    height:100px;
    width:300px;
    overflow:scroll;   
    background:#ccc;
}

#games-container {
    height:200px;
    width:450px;
    background:#aaa; 
    z-index:1000;
}

#games{
  hegight:100%;
  width:100%;
}

JavaScript

$(function() {
    $("#ovrigt, #games").sortable({
        connectWith: ".dropList",
        scroll: false
    }).disableSelection();
});