Vertically Scrollable Dropzone in Interact.js

Question

Use Case:

What i am trying to do is to create a pdf editior, so there are fields such as textbox etc on the right side and a pdf on the left side. the user can drag and drop a field onto the pdf. (and then write inside the fields and save it which will generate a new pdf, this part isn't relative to the question)

See the photo below for better understanding

Current Effort:

To achieve the task i am using interact.js. (the code below is a minimal example without the pdf)

I create an Interactable.js file which serves as a wrapper

Interactable.js

import React, { Component, cloneElement } from "react";
import PropTypes from "prop-types";
import { findDOMNode } from "react-dom";
import interact from "interact.js";
export default class Interactable extends Component {
  static defaultProps = {
    draggable: false,
    dropzone: false,
    resizable: false,
    draggableOptions: {},
    dropzoneOptions: {},
    resizableOptions: {},
  };

  render() {
    return cloneElement(this.props.children, {
      ref: (node) => (this.node = node),
      draggable: false,
    });
  }

  componentDidMount() {
    this.interact = interact(findDOMNode(this.node));
    this.setInteractions();
  }

  componentWillReceiveProps() {
    this.interact = interact(findDOMNode(this.node));
    this.setInteractions();
  }

  setInteractions() {
    if (this.props.draggable)
      this.interact.draggable(this.props.draggableOptions)
    if (this.props.dropzone) this.interact.dropzone(this.props.dropzoneOptions)
    if (this.props.resizable)
      this.interact.resizable(this.props.resizableOptions);
  }
}

Interactable.propTypes = {
  children: PropTypes.node.isRequired,
  draggable: PropTypes.bool,
  draggableOptions: PropTypes.object,
  dropzone: PropTypes.bool,
  dropzoneOptions: PropTypes.object,
  resizable: PropTypes.bool,
  resizableOptions: PropTypes.object,
};

I wrap the Dropzone and DragItems into the Interactable component

App.js

import "./App.css";
import Interactable from "./Interactable";

function App() {
  const draggableOptions = {
    onmove: (event) => {
      // console.log(event);
      const target = event.target;
      // keep the dragged position in the data-x/data-y attributes
      const x = (parseFloat(target.getAttribute("data-x")) || 0) + event.dx;
      const y = (parseFloat(target.getAttribute("data-y")) || 0) + event.dy;

      // translate the element
      target.style.webkitTransform = target.style.transform =
        "translate(" + x + "px, " + y + "px)";

      // update the posiion attributes
      target.setAttribute("data-x", x);
      target.setAttribute("data-y", y);
    },
  };
  return (
    <div className="MainContainer">
      <div className="DropzoneContainer">
        <Interactable
          dropzone={true}
          dropzoneOptions={{
            accept: ".drag-item",
            overlap: 0.75,
            ondropactivate: function (event) {
              event.target.classList.add("drop-active");
            },

            ondragenter: function (event) {
              var draggableElement = event.relatedTarget,
                dropzoneElement = event.target;
              dropzoneElement.classList.add("drop-target");
              draggableElement.classList.add("can-drop");
            },

            ondragleave: function (event) {
              event.target.classList.remove("drop-target");
              event.relatedTarget.classList.remove("can-drop");
              event.relatedTarget.textContent = "Dragged out";
            },

            ondrop: function (event) {
              console.log(event);
            },

            ondropdeactivate: function (event) {
              event.target.classList.remove("drop-active");
              event.target.classList.remove("drop-target");
            },
          }}
        >
          <div className="dropzone" id="outer-dropzone">
            <div className="DropzoneContent">
              Dropzone Content here
            </div>
          </div>
        </Interactable>
      </div>
      <div className="dragItems" >
        <Interactable
          draggable={true}
          draggableOptions={draggableOptions}
        >
          <div className="draggable drag-item" >
            Drag Item 1
          </div>
        </Interactable>
        <Interactable
          draggable={true}
          draggableOptions={draggableOptions}
        >
          <div className="draggable drag-item" >
            Drag Item 2
          </div>
        </Interactable>
      </div>
    </div>
  );
}

export default App;

Issue:

Currently the issue that i am facing is that when i drag and drop a drag-item onto the dropzone ,it does not move when i scroll the dropzone. it should be as if it is inside the dropzone. i have tried tweaking with the CSS and taking a closer look at the interact.js documentation but i have had no luck.

So if someone could help me out or point me in the right direction, i would really appreciate it, Cheers!

Codesandbox here

Github Repo here

Answer 1

Add autoScroll: true in draggableOptions.