Невозможно перетащить текст внутри текстового поля, когда ondragstart используется даже для родительского элемента - PullRequest
Новая
       44

Невозможно перетащить текст внутри текстового поля, когда ondragstart используется даже для родительского элемента

0 голосов
/ 05 мая 2020

У меня есть липкая панель инструментов, которую я хочу скрыть перед перетаскиванием, чтобы не закрывать верхнюю часть редактора, чтобы браузер мог запускать автоматическую прокрутку.

Проблема в том, что если я использую ondragstart, чтобы скрыть его, перетаскивание текста перестает работать в некоторых случаях . Например, не получается перетащить последнюю строку вверх. Если вы прокрутите вниз, так что панель инструментов больше не будет видна, начнется перетаскивание той же строки.

См. Этот gif 

class Container extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            v: new Array(20).fill(null).map((_, i) => 'line ' + i).join('\n'),
            draggingInProgress: false,
        };
    }
    render() {
        return (
            <div>
                <div style={{background: 'wheat', height: 500}}></div>

                <div
                    style={{border: '1px solid black', padding: 5}}
                    onDragStart={() => {
                        if (this.state.draggingInProgress !== true) {
                            this.setState({ draggingInProgress: true });
                        }
                    }}
                    onDragEnd={(e) => {
                        if (this.state.draggingInProgress !== false) {
                            this.setState({ draggingInProgress: false });
                        }
                    }}
                >
                    {this.state.draggingInProgress !== true ? <div>TOOLBAR</div> : null}
                    <textarea style={{height: 400}}>{this.state.v}</textarea>
                </div>

                <div style={{background: 'wheat', height: 500}}></div>
            </div>
        );
    }
}

ReactDOM.render(<Container />, document.getElementById('react-root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="react-root"></div>
...