0

Есть код диапазонного слайдера.

При onClick на поле слайдера я делаю

// Устанавливаю событие на движение мышью по документу
document.onmousemove = (event) => {
   this.moveRunner(event);
};

// При отпускании кнопки мыши отключаю предыдущую функцию
document.onmouseup = () => {document.onmousemove = null;}

Я использую document.onmousemove потому что если повесить onMouseMove на поле слайдера, то когда курсор выйдет за область слайдера (6px, а это гарантировано произойдет, если вы не ниндзя конечно), событие остановится. А задумка в том, чтобы зажал бегунок и мог водить по всему документу, а бегунок бегал в допустимых пределах. Именно поэтому я использую document.onmousemove. Но если есть другое решение, позволяющее осуществить задумку, будет здорово.

Однако функция отключается только при повторном нажатии НЕ на слайдер.

Первый вопрос, как это исправить?

И второй вопрос, не обязательный, но буду очень признателен. Вообще правильно реализована логика управления? Ведь document.onmousemove насколько я понимаю, перетрет document.onmousemove из другого места, если такое объявление имеется. То есть данный код становится не очень переиспользуемым, при переносе его в другой проект может произойти конфликт.

Как вообще реализовывается правильно такое управление? Спасибо!

Код диапазонного слайдера:

class App extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            limits: {
                min: 1,
                max: 100,
            },
            value: 50,
        };

    }

    componentDidMount() {
        this.setPositionRunner();
        this.input.value = this.cutValue(this.input.value);
    }

    getPositionCenterRunnerX () {
        let positionEvent = this.event.pageX - this.rangeElem.offsetLeft;
        let newPositionEvent = positionEvent < 0 ? 0 : positionEvent;

        return positionEvent > this.rangeElem.offsetWidth ? this.rangeElem.offsetWidth : newPositionEvent;
    }

    getLeft () {

        let halfRunner = this.runner.offsetWidth / 2;
        let left = this.event.pageX - this.rangeElem.offsetLeft - halfRunner;

        let max = this.rangeElem.offsetWidth - halfRunner;
        let newLeft = left < -halfRunner ? -halfRunner : left;

        return left > max ? max : newLeft;
    }

    getValue() {
        return Math.round(this.getPositionCenterRunnerX() / this.rangeElem.offsetWidth * (this.state.limits.max - this.state.limits.min) + this.state.limits.min);
    }

    setPositionRunner () {
        let halfRunner = this.runner.offsetWidth / 2;
        let positionCenter = Math.round((this.cutValue(this.state.value) - this.state.limits.min) / (this.state.limits.max - this.state.limits.min) * this.rangeElem.offsetWidth);
        let left = positionCenter - halfRunner;
        this.runner.style.left = `${left}px`;
    }

    moveRunner (event) {
        this.event = event;
        this.runner.style.left = `${this.getLeft()}px`;

        let value = this.getValue();

        this.setState({value});
    }

    onClick (event) {

        this.moveRunner(event);
        
        document.onmousemove = (event) => {
            this.moveRunner(event);
        };

        document.onmouseup = () => {document.onmousemove = null;}
    }

    cutValue(value) {
        value = value > this.state.limits.max ? this.state.limits.max : value;
        value = value < this.state.limits.min ? this.state.limits.min : value;
        return value;
    }

    onChangeInput (event) {
        let value = event.currentTarget.value.match(/\d*/g).join('');

        this.setState({value});

        clearTimeout(this.timeOut);
        this.timeOut = setTimeout(() => {
            
            value = this.cutValue(value);
            this.setState({value});
            this.setPositionRunner();

        }, 1000);

    }

    render () {

        return (
            <div className="slider">
                <div
                    ref={element => this.rangeElem = element}
                    onClick={event => {this.onClick (event)}}
                    className="slider__range"
                >
                    <div className="slider__runner" ref={element => this.runner = element} />
                </div>
                <div className="slider__view">
                    <p className="slider__limit">от {this.state.limits.min}</p>
                    <input
                        ref={element => this.input = element}
                        onChange={this.onChangeInput.bind(this)}
                        type="text"
                        className="slider__value"
                        value={this.state.value}
                    />
                    <p className="slider__limit">до {this.state.limits.max}</p>
                </div>
            </div>
        );
    }
}

ReactDOM.render(
    <App/>,
    document.getElementById('root')
);
.slider {
  padding: 50px 100px;
}

.slider__range {
  position: relative;
  height: 6px;
  margin: 20px 0;
  cursor: pointer;
  background: #e2e2e2;
}

.slider__runner {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  background: #0094ff;
}

.slider__view {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.slider__limit {
  display: inline-block;
}

.slider__value {
  text-align: center;
  border: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

1 ответ 1

0

У вас есть input, у React есть события мыши: https://reactjs.org/docs/events.html#mouse-events

Или вам нужно чтобы именно по странице водили мышь, а не по слайдеру? Если только по слайдеру, то попробуйте воспользоваться реактовскими событиями мыши навешанными на input. Если нужно сделать событие по определенной области, то вешайте события именно на эту область. Тогда проблема с переиспользованием решится.

Если по всей странице событие, то тогда прямо на root элемент (правда здесь нет смысла в переиспользовании, если вы конечно не хотите чтобы все слайдеры на странице делали одно и то же).

И да, событие onmouseup происходит при отпускании мыши пока курсор находится в пределах элемента, к которому добавлен атрибут onmouseup.

К сожалению сейчас у меня времени не особо много. Чуть попозже если не сможете найти решение, постараюсь помочь.

2
  • Да, я знаю про то, что можно сделать событие onmousemove на самом элементе, но в этом случае слайдером будет очень неудобно управлять. Придется водить именно по полю слайдера (4px), а если мышь выйдет за эти пределы, событие остановится. Именно поэтому событие на document, чтобы можно было зажав слайдер водить курсором по всему документу, не переживая, что событие остановится, а бегунок будет в допустимых пределах
    – Igor
    10 апр 2018 в 8:36
  • Да, буду очень признателен
    – Igor
    10 апр 2018 в 8:37

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.