JSFiddle - React, Tailwind, and code Playground

by devangkantharia

HTML

<div id="sortableContainer" class="col-xs-6">
	<div class="sortable"></div>
	<div class="sortable"></div>
	<div class="sortable"></div>
	<div class="sortable"></div>
	<div class="sortable"></div>
	<div class="sortable"></div>
	<div class="sortable"></div>
	<div class="sortable"></div>
	<div class="sortable"></div>
	<div class="sortable"></div>
</div>
<div id="droppableContainer" class="col-xs-6">
	<div class="droppable ui-droppable"></div>
	<div class="droppable ui-droppable"></div>
	<div class="droppable ui-droppable"></div>
	<div class="droppable ui-droppable"></div>
	<div class="droppable ui-droppable"></div>
	<div class="droppable ui-droppable"></div>
	<div class="droppable ui-droppable"></div>
	<div class="droppable ui-droppable"></div>
	<div class="droppable ui-droppable"></div>
	<div class="droppable ui-droppable"></div>
</div>

CSS

.sortable {
        height: 60px;
        width: 60px;
        background: red;
        float: left;
        margin: 10px;
    }
    .droppable {
        height: 50px;
        width: 200px;
        background: green;
        margin: 10px;
    }
.droppable.active { background: blue;}
    #droppableContainer {
        max-height: 300px;
        overflow: auto;
		width: 240px;
    }

JavaScript

var adding = 0
var scrollInterval = null;

$("#sortableContainer").sortable({
    refreshPositions: true,
    start: function (e, ui) {
        scrollInterval = setInterval(function () {
            var foo = $("#droppableContainer").scrollTop();
            $("#droppableContainer").scrollTop(foo + adding);
        }, 50)
    },
    stop: function (e, ui) {
        clearInterval(scrollInterval);
    },
    sort: function (e, ui) {
        var top = e.pageY - $("#droppableContainer").offset().top
        if (top < 10) {
            adding = -15
        } else if (top > $("#droppableContainer").height() - 10) {
            adding = 15
        } else {
            adding = 0
        }
    },
});
$(".droppable").droppable({
    hoverClass: "active",
    accept: ".sortable",
    drop: function (event, ui) {
        ui.draggable.remove();
    },
})