Scroll on drag with react-dnd

sroll_on_drag.js

  configureDragDrop(registerType) {
    var imageThreshold = Math.max(120, window.innerHeight / 4),
        sectionThreshold = Math.max(140, window.innerHeight / 4),
        currentDY = 0,
        frame;

    function makeScrollingHandler(threshold) {
      function getScrollDY(clientY) {
        var speed;
        if (clientY < threshold) {
          // -1 to 0 as we move from 0 to threshold
          speed = -1 + clientY / threshold;
        } else if (clientY > window.innerHeight - threshold) {
          // 0 to 1 as we move from (innerHeight - threshold) to innerHeight
          speed = 1 - (window.innerHeight - clientY) / threshold;
        } else {
          speed = 0;
        }

        return Math.round(speed * 10);
      }

      function tick() {
        if (!currentDY) {
          frame = null;
          return;
        }

        window.scrollTo(0, getScrollY() + currentDY);
        frame = window.requestAnimationFrame(tick);
      }

      function queueScroll(dy) {
        currentDY = dy;

        if (!frame) {
          frame = window.requestAnimationFrame(tick);
        }
      }

      function cancelScroll() {
        window.cancelAnimationFrame(frame);
        frame = null;
        currentDY = 0;
      }

      return {
        dropTarget: {
          enter: cancelScroll,
          leave: cancelScroll,

          over(item, e) {
            queueScroll(getScrollDY(e.clientY));
          },

          acceptDrop() {
            cancelScroll();
            return false;
          }
        }
      };
    }

    registerType(DragItemTypes.SECTION, makeScrollingHandler(sectionThreshold));
    registerType(DragItemTypes.IMAGE, makeScrollingHandler(imageThreshold));
  },