How to scroll horizontally with the mouse with draggable?

• 0
  jsfiddle example
  

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

  
  
  What is the problem: I still have `draggable` and when the scroll script is used, it does not allow` draggable` to work
  
  That is, they don't want to work together, either scroll or drag.
  
  How to make them work together, maybe there is another script for scrolling with the mouse.
  
  If I understand correctly, `scr.mousedown` intercepts all mouse movements, is it possible to somehow protect` block` from `mousedown` and` mouseup`?

  JavaScript Felicity Grant, Nov 21, 2020

---

0 Answers