React NPM 패키지 (Dragula)는 개발 중이지만 생산 중이 아닙니다.

React 15와 Dragula 3.7.2를 사용하여 멋진 drag'n Drop을 만들었지 만, 제작을 위해 내 응용 프로그램을 번들링하면 전체 dnd가 작동하지 않습니다. 단일 요소를 들어 올릴 수 있지만 컨테이너를 찾을 수 없다는 것을 제외하고는React NPM 패키지 (Dragula)는 개발 중이지만 생산 중이 아닙니다.

저는 현재 componentDidMount에 작성한 drake 인스턴스에 대한 참조로 내 컨테이너를 할당하고 있습니다.

나는 여러 개의 EventListener를 drake 인스턴스에 할당했지만 발사하는 것은 'drag'-eventListener'뿐입니다. 나는 거기에 드레이크 인스턴스를 console.logged 제대로

나는 또한 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

출처

2017-10-30 takethefake