Interact.js中的垂直滚动Dropzone

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文档，但是我没有运气。

因此，如果有人能帮助我或指出我的正确方向，我会非常感激的，干杯！

Codesandbox 这里

Github 这里

Answer 1

在autoScroll: true中添加draggableOptions。