Untitled

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <link data-require="kendoUI@2014.2.716" data-semver="2014.2.716" rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" />
    <link data-require="kendoUI@2014.2.716" data-semver="2014.2.716" rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" />
    <script data-require="kendoUI@2014.2.716" data-semver="2014.2.716" src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Demo Sortable Scrolling</h1>
    
    <p>This demonstrates a way to make the Kendo UI 
    Sortable widget scroll the container when an item is 
    dragged outside of the container's boundary</p>
    
    <p>Drag a box above or below the container to scroll.</p>
    
    <div id="container"></div>
    
  </body>

</html>

$(function() {
  
  function addBoxes() {
    var container = $('#container');
    for (var i=0; i<40; i++) {
      var rndColor = (Math.random().toString(16) + '000000').slice(2, 8);
      container.append($('<div class="item"></div>').css({
        'background-color': '#' + rndColor
      }));
    }
  }
  
  function initSortable() {
    var container = $('#container'),
      mouseX = false,
      mouseY = false;
  
    container.kendoSortable({
      start: function(e) {
        var container = $('#container')[0],
          containerRect = container.getBoundingClientRect(),
          adjustedTop = containerRect.top + 15,
          adjustedBottom = containerRect.bottom - 15,
          adjustedLeft = containerRect.left + 15,
          adjustedRight = containerRect.right - 15,
  
          adjust = function(scrollPosition, contentSize, containerSize, mouse, low, high) {
            var repeat = false;
            if (mouse < low) {
              if (container[scrollPosition] > 0) {
                container[scrollPosition] += (mouse - low) / 4;
                repeat = true;
              }
            } else if (mouse > high) {
              if (container[contentSize] - container[scrollPosition] > container[containerSize]) {
                container[scrollPosition] += (mouse - high) / 4;
                repeat = true;
              }
            }
            return repeat;
          },
  
          checkForMoreScroll = function(e) {
            var repeat = false;
  
            if (mouseX) {
              repeat = adjust('scrollLeft', 'scrollWidth', 'clientWidth', mouseX, adjustedLeft, adjustedRight);
              repeat = adjust('scrollTop', 'scrollHeight', 'clientHeight', mouseY, adjustedTop, adjustedBottom) || repeat;
            }
  
            if (repeat) {
              setTimeout(checkForMoreScroll, 200);
            }
          };
  
        // Scroll container as item is dragged above, below, left, or right of visible area.
        e.sender._draggable.bind("drag", function(e) {
          mouseX = e.pageX;
          mouseY = e.pageY;
          checkForMoreScroll();
        });
      },
      end: function() {
        mouseX = false;
        mouseY = false;
      },
      cancel: function() {
        mouseX = false;
        mouseY = false;
      }
    });
  }
  
  addBoxes();
  initSortable();
});


#container {
  border: 1px solid #999;
  padding: 0 15px 15x 15x;
  margin-top: 15px;
  background-color: #efefef;
  position: relative;
  width:255px;
  height:300px;
  overflow: auto;
  box-sizing: border-box;
}

.item {
  border: 1px solid #999;
  padding: 15px;
  position: relative;
  width:30px;
  height:30px;
  display: inline-block;
  margin-top: 15px;
  margin-left: 15px;
}

Demo Sortable Scrolling

This demonstrates a way to make the Kendo UI Sortable widget scroll the container when an item is dragged outside of the container's boundary

Drag a box above or below the container to scroll.