react-dropzoneでドラッグ&ドロップ実装で相談させてください。
windowにいれたときに、ドロップ窓が出現して、そこにdropできるような仕様にしたいです。
windowオブジェクトでdragover、dragleaveでリスナー登録して試しているのですが、
ドロップ窓にファイルをいれたところで、dragover、dragleaveイベントが交互に発火して
想定通りに動きません。slackやchatworkのような添付ファイル仕様を実現するには
どうすればよいでしょうか。
import React, { Component, PropTypes } from "react" import ReactDOM from "react-dom" import Dropzone from "react-dropzone" export default class AttachmentForm extends Component { constructor(props) { super(props) this.state = { file: null, fileUrl: "", dragging: false, inDropzone: false } } componentDidMount() { this.dragoverListener = document.addEventListener("dragover", ::this.onDragOver); this.dragleaveListener = document.addEventListener("dragleave", ::this.onDragLeave); } componentWillUnmount() { this.dragoverListener.remove(); this.dragleaveListener.remove(); } handleSubmit(file) { // アップロード処理 } onDrop(files) { _.each(files, ::this.handleSubmit); this.setState({ dragging: false }) } onDragOver(e) { e.preventDefault(); e.stopPropagation(); if (!this.state.dragging) { this.setState({ dragging: true }) } } onDragEnter(e) { e.preventDefault(); this.setState({ inDropzone: true }) this.setState({ dragging: true }) } onDragLeave(e) { // e.preventDefault(); console.log("onDragLeave") // this.setState({ dragging: true, inDropzone: false }) if (this.state.dragging) { this.setState({ dragging: false }) } } onDragStart(e) { // e.preventDefault(); console.log("onDragStart") // // this.setState({ dragging: true, inDropzone: false }) // if (this.state.dragging) { // this.setState({ // dragging: false // }) // } } render() { return ( <div className="file-form-container"> <div onDragOver={this.dragOver}></div> <Dropzone className="chatroom-dropzone" ref="dropzone" onDrop={::this.onDrop} onDragEnter={::this.onDragEnter} multiple={true} dragging={true} > {this.state.dragging && <div className="dragging">dropzone area</div> } </Dropzone> </div> ) } }
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/14 13:46