Скроллинг по горизонтали мышкой

//Скрол мышкой 
window.onload = function() { 
  var scr = $(".scroll"); 
  scr.mousedown(function() { 
    var startX = this.scrollLeft + event.pageX; 
    var startY = this.scrollTop + event.pageY; 
    scr.mousemove(function() { 
      this.scrollLeft = startX - event.pageX; 
      this.scrollTop = startY - event.pageY; 
      return false; 
    }); 
  }); 
  $(window).mouseup(function() { 
    scr.off("mousemove"); 
  }); 
}; 
//Скрол мышкой 
$(function() { 
  $('.block').draggable({ 
    revert: true, 
    zIndex: 100, 
    revertDuration: 0, 
    helper: "clone" 
  }); 
});

.scroll { 
  height: 200px; 
  overflow-x: auto; 
  width: 300px; 
  cursor: all-scroll; 
  display: flex; 
} 
 
.block { 
  padding: 5px; 
  border: 1px solid #000; 
  margin: 5px; 
  background: #fff; 
  width: 100px; 
} 
 
.sortable.hover { 
  background: #cac3c3; 
} 
 
.sortable { 
  border: 1px solid red; 
  padding: 25px 5px 5px; 
  width: 120px; 
  height: 100% 
} 
 
.title { 
  position: absolute; 
  top: 15px; 
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<div class="scroll"> 
 
  <div class="sortable" data-block="1"> 
    <div class="block"> 
      Блок1 
    </div> 
    <div class="block"> 
      Блок2 
    </div> 
    <div class="block"> 
      Блок3 
    </div> 
  </div> 
  <div class="sortable" data-block="2"> 
    <div class="block"> 
      Блок11 
    </div> 
    <div class="block"> 
      Блок12 
    </div> 
    <div class="block"> 
      Блок13 
    </div> 
  </div> 
  <div class="sortable" data-block="3"> 
    <div class="block"> 
      Блок11 
    </div> 
    <div class="block"> 
      Блок12 
    </div> 
    <div class="block"> 
      Блок13 
    </div> 
  </div> 
 
</div>