집 > 기사 > 웹 프론트엔드 > 마우스 드래그 이벤트를 시뮬레이션하는 Node.js(그림 및 텍스트 예제 포함)

마우스 드래그 이벤트를 시뮬레이션하는 Node.js(그림 및 텍스트 예제 포함)

藏色散人앞으로: 2022-08-07 10:13:503801검색

본 글의 예시는 참고용으로 자바스크립트에서 마우스 드래그 효과를 구현하기 위한 구체적인 코드를 공유합니다. 이 실험은 상자를 유지하고 마우스의 상대적 위치는 변경되지 않고 마우스를 누르고 이동하면 드래그 효과를 얻는 것입니다. 드래그 효과를 얻는 방법은 무엇입니까?

세 가지 함수인 onmousedown, onmousemove, onmouseup을 사용해야 합니다. 각각 마우스 다운, 마우스 이동, 마우스 업을 나타냅니다.

마우스 누름의 콜백 함수에서 clientX를 전달해야 합니다. 및 clientY는 마우스의 초기 위치를 가져오고 offsetLeft 및 offsetTop을 통해 상자의 초기 위치를 가져온 다음 계산합니다. 마우스와 상자의 초기 위치 초기 위치의 차이

마우스 움직임함수에서; span>, 마우스 위치와 이전에 계산된 값의 차이를 기반으로 상자의 현재 위치를 가져온 다음 왼쪽 및 위쪽 값을 절대 위치로 설정하는 것을 잊지 마세요( 잊어버렸기 때문에...)

마우스 업의 콜백 함수에서 onmousemove 및 onmouseup 값을 null로 설정하기만 하면 됩니다

또한주의하세요! ! !

onmousedown、onmousemove、onmouseup，分别表示鼠标按下、鼠标移动、鼠标抬起

在鼠标按下的回调函数中，我们需要通过clientX和clientY获取鼠标的初始位置，通过offsetLeft和offsetTop获取盒子的初始位置，然后计算鼠标初始位置和盒子初始位置的差值；

在鼠标移动的回调函数中，我们需要根据鼠标的位置和之前计算得到的差值来获取盒子现在的位置，然后改变其left和top值，不要忘记将position设置为absolute（因为我就忘记了。。。)

在鼠标抬起的回调函数中，我们需要清除鼠标移动和鼠标抬起，通过将onmousemove和onmouseup마우스 이동 기능과 마우스 들어올리기 기능 모두 마우스 누르기 기능에 작성해야 합니다. 왜냐하면 마우스 누르기 동작 이후의 후속 동작을 설계해야 하기 때문입니다.

매우 중요한 점은 다음과 같습니다.

마우스 누르기 기능은 p에 속하고, 마우스 움직임과 마우스 들어올리기는 document에 속합니다

마우스가 p에서 움직이는 것이 아니라 전체 페이지에서 움직인다는 뜻이니까요

핵심 포인트는 아마 이게 아닐까 싶습니다. 코드는 이렇습니다. :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            border-radius: 14px;
            box-shadow: 2px 2px 6px rgba(0,0,0,.3);

            /* 好家伙 都没设置定位  就想移动 改变left。。。 */
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        let box=document.getElementById("box");
        box.onmousedown=function(event){
            let disx=event.clientX-box.offsetLeft;
            let disy=event.clientY-box.offsetTop;
            //此处不是box.onmousemove，是document.onmousemove
            document.onmousemove=function(event){
                box.style.left=event.clientX-disx+&#39;px&#39;;
                box.style.top=event.clientY-disy+&#39;px&#39;;
            }

            //要写在ommousedown里面
            document.onmouseup=function(){
                //这俩都要置为null
            document.onmousemove=null;
            document.onmouseup=null;
            return false;
        }
        }
        
    </script>
</body>
</html>

마우스 드래그 이벤트를 시뮬레이션하는 Node.js(그림 및 텍스트 예제 포함)

관련 기사