Interact.js 中的垂直可滚动拖放区

Question

用例：

我要做的是创建一个pdf编辑器，因此右侧有文本框等字段，左侧有pdf。用户可以将字段拖放到 pdf 上。 （然后在字段中写入并保存它将生成一个新的pdf，这部分与问题无关）

请看下面的照片以更好地理解

目前的努力：

为了完成我使用interact.js 的任务。 （下面的代码是一个没有 pdf 的最小示例）

我创建了一个 Interactable.js 文件作为包装器

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,
};

我将 Dropzone 和 DragItems 包装到 Interactable 组件中

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;

问题：

目前我面临的问题是，当我将drag-item 拖放到dropzone 上时，当我滚动dropzone 时它不会移动。它应该好像在dropzone 内。我尝试使用 CSS 进行调整并仔细查看 interact.js 文档，但我没有运气。

因此，如果有人可以帮助我或为我指明正确的方向，我将不胜感激，干杯！

代码沙盒 here

Github 回购 here

Answer 1

在draggableOptions 中添加autoScroll: true。