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
Your Answer
To place the code, please use CodePen or similar tool. Thanks you!