React NPM 包（Dragula）在开发中有效，但在生产中无效

Question

我已经用 React 15 和 Dragula 3.7.2 构建了一个不错的拖放，但是当我捆绑我的生产应用程序时，整个 dnd 都不起作用，除了我能够举起一个元素但是找不到可以放入的容器。

我正在为我的容器分配对我当前在 componentDidMount 中创建的 drake 实例的引用。

我已经为 drake 实例分配了多个 EventListener，但唯一触发的是 'drag'-eventListener。我 console.logged 那里的 drake 实例，看到我所有相关的容器都正确分配了

我还认为 dragula 包可能会出现缩小失败，所以我使用了来自 cdn 的版本

class ProcessGridDrag extends React.Component {
  constructor() {
    super();
    this.dragContext = null;
    this.dragContainers = [];
  }

  componentDidMount() {
    // eslint-disable-next-line no-undef
    this.drake = dragula(this.dragContainers, options);
    console.log('didMount');
    console.log(this.drake.containers);
    this.drake.on('drop', this.onDropTile);
    this.drake.on('out', this.onOutContainer);
    this.drake.on('over', console.log);
    this.drake.on('drag', () => {
      debugger;
      console.log(this.drake);
    });
    this.drake.on('shadow', console.log);
    // Override for touchmove for correct behaviour on iPad
    window.addEventListener('touchmove', () => {});
  }

  componentWillUnmount() {
    this.dragContainers = [];
    console.log('will Unmount');
    this.drake.containers = [];
    this.drake.off('drop', this.onDropTile);
    this.drake.off('out', this.onOutContainer);
    this.dragContext = null;
    this.drake.destroy();
  }
  
  // This one is passed down to components which should act as a drag container
  dragulaDecorator = componentBackingInstance => {
    if (
      componentBackingInstance &&
      this.dragContainers.indexOf(componentBackingInstance) === -1
    ) {
      this.dragContainers.push(componentBackingInstance);
    }
  };

webpack.config.prod: https://pastebin.com/BLu2hmmv webpack.config.dev: https://pastebin.com/3wczNisj

Answer 1

我的 css 有问题。我已经覆盖了被拖动元素的最高值。

由于生产中的 LoadOrder 不同，此问题只发生在那里

React NPM 包（Dragula）在开发中有效，但在生产中无效

React NPM package(Dragula) works in development but not in production

javascript

reactjs

webpack

dragula