Question

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

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

我已经为drake实例分配了多个EventListener，但是唯一一个触发的是'drag'-eventListener。我在那里安装了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）在开发中工作，但不在生产中

1 个答案: