Kendo UI Drag & Scroll

Enable scrolling while using Kendo drag and drop

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<div id="drag-container">
    <div class="drop-target" data-role="listview" data-bind="source: listData1" data-template="list-item-template"></div>
    <div class="drop-target" id="bottom-drop-target" data-role="listview" data-bind="source: listData2" data-template="list-item-template"></div>
</div>
<script id="list-item-template" type="text/x-kendo-template">
    <div class="draggable" data-uid="#=uid#">#=name#</div>
</script>

CSS

#drag-container {
    height: 1200px;
}
#bottom-drop-target {
    position: absolute;
    top: 1100px;
}
.draggable {
    border: 1px solid gray;
    margin: 5px;
    padding: 5px;
    min-width: 80px;
    text-align: center;
    cursor: pointer;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    background-color: rgba(255, 255, 255, 0.75);
}
.drop-target {
    border: 2px solid lightgray;
    min-height: 80px;
    width: 90%;
}
.drop-target > * {
    float: left;
}
.drag-active .drop-target {
    border: 2px dashed gray;
}
.drag-active .drop-target.hover {
    background-color: darkgray;
}

JavaScript

(function () {

    var viewModel = kendo.observable({
        listData1: new kendo.data.DataSource({
            data: [{name: 'Bob'}, {name: 'Sally'}, {name: 'Jeff'}, {name: 'Sam'}, {name: 'Ted'}]
        }),
        listData2: new kendo.data.DataSource({
            data: [{name: 'Frank'}, {name: 'Chris'}]
        })
    });

    var dragDrop = {

        draggableOnDragStart: function (e) {
            $('#drag-container').addClass('drag-active');
        },

        drag: function (e) {
            // Get the Height of the window
            var windowY = $(window).innerHeight();

            // You can also get the width of the window here if you need horizontal scrolling
            
            // Drag and Scroll
            if ((e.clientY + 100) > windowY) {
                // If we are within 100px of the bottom, scroll down by 20px
                $(window).scrollTop($(window).scrollTop() + 20); 
                console.log('top')
                } else if ((e.clientY - 164) < 0) {
                // If we are within 164px of the top, scroll up by 20px
                $(window).scrollTop($(window).scrollTop() - 20);
                /* alert('bottom') */
            }
        },

        droptargetOnDragEnter: function (e) {
            $(this.element[0]).addClass('hover');
        },

        droptargetOnDragLeave: function (e) {
            $(this.element[0]).removeClass('hover');
        },

        droptargetOnDrop: function (e) {
            var dragged = $(e.target);
            var dropped = $(this.element[0]); // drop location

            var dragUid = dragged.data('uid');
            var targetDS = dropped.getKendoListView().dataSource;
            if (targetDS.getByUid(dragUid)) {
                // don't allow drop into original list
                return;
            }

            // remove from lists
            var toRemove = viewModel.listData1.getByUid(dragUid);
            if (toRemove) {
                  ...