如何拖动元素并确保光标不会比它快？

Question

我有这个带有两个拇指的滑块。拇指可以沿着滑块（线）移动，这可以通过增加或减少他们的margin-left来实现，但是为了让他们移动状态move必须是true，它发生在每个拇指触发事件onClickDown。但是，如果触发事件onClickedUp，光标离开拇指或滑块的区域，move 设置为false，是什么使拇指停止移动。没关系，就是这样。

问题是光标可能比拇指移动更快，如下图所示，是什么让光标离开拇指区域并将move设置为false，即使那不是用户想要的。

因此，为了使滑块正常工作，用户在移动拇指时必须非常小心，这是一个非常烦人的用户体验。

简而言之，我需要做的是确保光标的移动速度不会超过拇指，我是否必须减慢光标或增加拇指的速度都没有关系。

我该怎么做？

这是我的代码和一些注释：

import React, { Fragment } from 'react'

import './Filter.css'


const Filter = props => {

    const sliderRef = React.useRef() // => main parent div

    const initial_position = 0 
    const end_position = 200 

    const initial_min_value = 5 // => Initial price 
    const initial_max_value = 1290 // => Final price

    let [thumb1_position, setValueThumb1] =  React.useState(0)
    let [thumb2_position, setValueThumb2] =  React.useState(0)
    let [min_value, setMinValue] =  React.useState(initial_min_value)
    let [max_value, setMaxValue] =  React.useState(initial_max_value)
    let [move, setMove] =  React.useState(false) // => Enable thumbs to move
    
    // Ensure that the thumb_2 will be in the end of the slider at first
    React.useEffect(() => {
        setValueThumb2(sliderRef.current.offsetWidth - 5)
    }, [])


    // Here I get the position of the cursor within the element (slider) and move the thumbs based on it.
    const handleChange = e => {

        let thumb_class = e.target.className

        var rect = sliderRef.current.getBoundingClientRect();
        const current_position = e.clientX - rect.left; // X position within the element.

        // Only moves if 'move' is true
        if (move === true) {

            // Get the className to ensure that only the clicked thumb is moved
            if (thumb_class.includes('left-thumb')) {

                // Ensure that the thumb_1 will always be on the left and the thumb_2 on the right
                // Ensure that neither of the thumbs exceed the limits of the slider
                if (current_position >= initial_position && current_position < thumb2_position - 25) {
                    setValueThumb1(current_position)
                } else if (current_position >= initial_position && current_position >= thumb2_position - 25) {
                    setValueThumb1(thumb2_position - 25)
                    setMove(false)
                } else {
                    setValueThumb1(initial_position)
                    setMove(false)
                }

                if (thumb1_position - initial_position < 1) {
                    setMinValue(initial_min_value)
                } else {
                    setMinValue((thumb1_position - initial_position) * 6.46)
                }

            } else if (thumb_class.includes('right-thumb')) {
                
                if (current_position >= thumb1_position + 25 && current_position <= end_position) {
                    setValueThumb2(current_position)
                } else if (current_position >= thumb1_position + 25 && current_position >= end_position) {
                    setValueThumb2(end_position)
                    setMove(false)
                } else {
                    setValueThumb2(thumb1_position + 25)
                    setMove(false)
                }

                if (thumb2_position > end_position - 1) {
                    setMaxValue(initial_max_value)
                } else {
                    setMaxValue((thumb2_position - initial_position) * 6.48)
                }
            }
        }

    }

    const moveOn = e => {
        setMove(true)
    }

    const moveOff = () => {
        setMove(false)
    }



    return (
        <Fragment>
            <div>
                <h6 style={{marginBottom: '35px'}}>PRICE FILTER</h6>
                <div className="range-container"
                    onMouseMove={(e) => handleChange(e)}
                    onMouseDown={(e) => moveOn(e)}
                    onMouseUp={() => moveOff()}
                    onMouseLeave={() => moveOff()}

                    ref={sliderRef}
                >
                    <div className="range">
                        <span className="rounded-circle left-thumb"
                            style={{
                                width:'15px',
                                height: '15px',
                                backgroundColor: 'red',
                                marginTop: '-6px',
                                marginLeft: thumb1_position - 7 + 'px'
                            }}
                        ></span>
                        <span className="rounded-circle right-thumb"
                            style={{
                                width:'15px',
                                height: '15px',
                                backgroundColor: 'black',
                                marginTop: '-6px',
                                marginLeft: thumb2_position - 7 + 'px'
                            }}

                        ></span>
                        <p style={{
                            marginLeft: thumb1_position - 15 + 'px',
                            position: 'absolute',
                            marginTop: '15px'}}
                        > {Math.floor(min_value)}
                        </p>
                        <p style={{
                            marginLeft: thumb2_position - 15 + 'px',
                            position: 'absolute',
                            marginTop: '15px'}}
                        > {Math.floor(max_value)}
                        </p>
                    </div>
                </div>
            </div>
        </Fragment>
    )
}

export default Filter

Answer 1

我不断挖掘并偶然发现setPointerCapture() 方法，解决了我的问题。

https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture

它的功能是完全按照我对代码所做的操作，但使用pointer events。它使元素在 pointerdown 事件上移动，并在 pointerup 事件上停止移动。

因为它几乎可以完成我需要做的所有事情，所以我可以摆脱一些我正在使用的功能。事实上，唯一保留的函数是handleChange。除此之外，我还删除了move 状态，但我必须添加一些refs 才能获取每个元素。

这是新代码：

import React, { Fragment } from 'react'

import './Filter.css'


const Filter = props => {

    const sliderRef = React.useRef() // => main parent div

    const sliderRef = React.useRef() // => Div que engloba o slider
    const thumb_1_Ref = React.useRef() // => Div que engloba o slider
    const thumb_2_Ref = React.useRef() // => Div que engloba o slider
    const price_thumb_1_Ref = React.useRef() // => Div que engloba o slider
    const price_thumb_2_Ref = React.useRef() // => Div que engloba o slider
    
    const initial_position = 0 
    
    const initial_min_value = 5 // => Initial price 
    const initial_max_value = 1290 // => Final price

    let [thumb1_position, setValueThumb1] =  React.useState(0)
    let [thumb2_position, setValueThumb2] =  React.useState(0)
    let [mobile_thumb1_position, setValueMobileThumb1] =  React.useState(0)
    let [mobile_thumb2_position, setValueMobileThumb2] =  React.useState(0)
    let [min_value, setMinValue] =  React.useState(initial_min_value)
    let [max_value, setMaxValue] =  React.useState(initial_max_value)
    
    // Ensure that the thumb_2 will be in the end of the slider at first
    React.useEffect(() => {
        setValueThumb2(sliderRef.current.offsetWidth - 5)
    }, [])



    let slider
    let slider_price

    const beginSliding = e => {
        slider.onpointermove = slide
        slider.setPointerCapture(e.pointerId)
    }
    
    const stopSliding = e => {
        slider.onpointermove = null
        slider.releasePointerCapture(e.pointerId)
    }
    
    const slide = e => {
        const thumb_class = e.target.className

        let rect = sliderRef.current.getBoundingClientRect()
        let current_position = e.clientX - rect.left 
        
        if (thumb_class.includes('right-thumb')) {

            current_position = current_position - sliderRef.current.offsetWidth

            if (current_position >= initial_position) {
                current_position = initial_position
            }

            if (current_position <= mobile_thumb1_position - 175) {
                current_position = mobile_thumb1_position - 175
            }
            
            setValueMobileThumb2(current_position)
        } 
        
        if (thumb_class.includes('left-thumb')) {

            if (current_position <= initial_position) {
                current_position = initial_position
            }

            if (current_position >= mobile_thumb2_position + 175) {
                current_position = mobile_thumb2_position + 175
            }

            setValueMobileThumb1(current_position)
        }
        
        slider.style.transform = `translate(${current_position}px)`
        slider_price.style.transform = `translate(${current_position}px)`
    }
        
    
    const handleChange = e => {

        const thumb_class = e.target.className

        if (thumb_class.includes('left-thumb')) {

            slider = thumb_1_Ref.current;
            slider_price = price_thumb_1_Ref.current;

            slider.onpointerdown = beginSliding;
            slider.onpointerup = stopSliding;

            if (mobile_thumb1_position - initial_position < 1) {
                setMinValue(initial_min_value)
            } else {
                setMinValue((mobile_thumb1_position - initial_position) * 6.45)
            }

        } else if (thumb_class.includes('right-thumb')) {
            
            slider = thumb_2_Ref.current;
            slider_price = price_thumb_2_Ref.current;

            slider.onpointerdown = beginSliding;
            slider.onpointerup = stopSliding;

            if (mobile_thumb2_position > -1) {
                setMaxValue(initial_max_value)
            } else {
                setMaxValue((mobile_thumb2_position + 200) * 6.45)
            }
        }

    }



    return (
        <Fragment>
            <div>
                <h6 style={{marginBottom: '35px'}}>PRICE FILTER</h6>
                <div className="range-container"
                    onMouseMove={(e) => handleChange(e)}
                    ref={sliderRef}
                >
                    <div className="range"

                    >
                        <span 
                            className="rounded-circle left-thumb"
                            style={{
                                width:'15px',
                                height: '15px',
                                backgroundColor: 'red',
                                marginTop: '-6px',
                                marginLeft: thumb1_position - 7 + 'px'
                            }}
                            ref={thumb_1_Ref}
                        ></span>
                        <span 
                            className="rounded-circle right-thumb"
                            style={{
                                width:'15px',
                                height: '15px',
                                backgroundColor: 'black',
                                marginTop: '-6px',
                                marginLeft: thumb2_position - 7 + 'px'
                            }}
                            ref={thumb_2_Ref}
                        ></span>
                        <p style={{
                            marginLeft: thumb1_position - 15 + 'px',
                            position: 'absolute',
                            marginTop: '15px'}}
                            ref={price_thumb_1_Ref}
                        > {Math.floor(min_value)}
                        </p>
                        <p style={{
                            marginLeft: thumb2_position - 15 + 'px',
                            position: 'absolute',
                            marginTop: '15px'}}
                            ref={price_thumb_2_Ref}
                        > {Math.floor(max_value)}
                        </p>
                    </div>
                </div>
            </div>
        </Fragment>
    )
}

export default Filter