Как сделать скроллинг по горизонтали мышкой с draggable?

Question

[nicolaa]

Пример на jsfiddle

//Скрол мышкой
    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>

В чем проблема: у меня еще стоит `draggable` и когда используется скрипт скролла, он не дает работать `draggable`

То есть они не хотят работать вмести, либо скролл либо драг

Как сделать, чтобы они работали вмести, может есть другой скрипт скролла мышкой

Если я правильно понимаю, то `scr.mousedown` перехватывает все движения мышки, можно как-то оградить `block` от `mousedown` и `mouseup`?