JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="wall">
<ul class="list" id="list1">
<li class="card"></li>
<li class="card"></li>
<li class="card"></li>
<li class="card"></li>
</ul>
<ul class="list" id="list2">
<li class="card"></li>
<li class="card"></li>
<li class="card"></li>
<li class="card"></li>
</ul>
<ul class="list" id="list3">
<li class="card"></li>
<li class="card"></li>
<li class="card"></li>
<li class="card"></li>
</ul>
<ul class="list" id="list4">
<li class="card"></li>
<li class="card"></li>
<li class="card"></li>
<li class="card"></li>
</ul>
<ul class="list" id="list5">
<!-- Empty List -->
</ul>
<ul class="list" id="list6">
<!-- Empty List -->
</ul>
<ul class="list" id="list7">
<!-- Empty List -->
</ul>
<ul class="list" id="list8">
<!-- Empty List -->
</ul>
</div>
CSS
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
.wall {
width: 1280px;
height: 100%;
background-color: #0074D9;
font-size: 0;
word-spacing: 10px;
cursor: -webkit-grab;
}
.wall:active {
cursor: -webkit-grabbing;
}
.list {
display: inline-block;
width: 150px;
background-color: #FF4136;
font-size: initial;
height: 100%;
padding: 0 5px;
margin: 0;
list-style: none;
}
.card {
height: 50px;
width: 100%;
background-color: #2ECC40;
margin-top: 5px;
}
JavaScript
var curYPos = 0,
curXPos = 0,
curDown = false;
$('.wall')[0].addEventListener('mousemove', function(e){
if(curDown === true){
window.scrollTo(document.body.scrollLeft + (curXPos - e.pageX), document.body.scrollTop + (curYPos - e.pageY));
}
});
$('.wall')[0].addEventListener('mousedown', function(e) {
var $target = $(e.target);
if (!$target.hasClass('card')) {
curDown = true;
curYPos = e.pageY;
curXPos = e.pageX;
}
});
$('.wall')[0].addEventListener('mouseup', function(e){
curDown = false;
});
$(function() {
for (var i = 1 ; i <= 8 ; i++) {
$( "#list" + i ).sortable({
connectWith: "#list1, #list2, #list3, #list4, #list5, #list6, #list7, #list8"
}).disableSelection();
}
});