화면구현/HTML

마우스로끌기 완성~

psys 2020. 7. 8. 09:27
728x90

저번의 코드

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #id_psy {
            position: absolute;
            /* static은 움직이지 않음 */
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="id_psy" onmousedown="f_down()" onmouseout="f_out()" onmousemove="f_move()" onmouseup="f_up()">
        나 성연</div>
    <script>
        var v_psy = document.getElementById("id_psy");
        var v_isLeftDown = false;  // 왼쪽 버튼 누르지 않은 상황
        function f_down() {
            if (event.button == 0) {
                v_isLeftDown = true;
            }
        }

        function f_move() {
            console.log(v_isLeftDown);
            if (v_isLeftDown) {  //  왼쪽 버튼이 눌려져 있는 상황일 때
                v_psy.style.left = event.clientX + "px";
                v_psy.style.top = event.clientY + "px";
            }
        }
        function f_out() {
            v_isLeftDown = false;
        }

        function f_up() {
            v_isLeftDown = false;
        }

        // 오늘의 과제 마우스가 움직이는 만큼 div도 움직임
        // 곧 제대로된 마우스 끌기! (산수문제);
    </script>
</body>

</html>

 

새롭게새롭게~

    <script>
        window.onload = function(){
            v_psy.style.left = "100px";
            v_psy.style.top = "100px";
        }
    </script>
더보기 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #id_psy {
            position: absolute;
            /* static은 움직이지 않음 */
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="id_psy" onmousedown="f_down()" onmouseout="f_out()" onmousemove="f_move()" onmouseup="f_up()">
        나 성연</div>
    <script>
        window.onload = function () {
            v_psy.style.left = "100px";
            v_psy.style.top = "100px";
        }
        var v_psy = document.getElementById("id_psy");
        var v_isLeftDown = false;  // 왼쪽 버튼 누르지 않은 상황

        function f_down() {
            if (event.button == 0) {
                v_isLeftDown = true;
            }
        }

        function f_move() {
            console.log(v_isLeftDown);
            if (v_isLeftDown) {  //  왼쪽 버튼이 눌려져 있는 상황일 때
                v_psy.style.left = event.clientX + "px";
                v_psy.style.top = event.clientY + "px";
            }
        }
        function f_out() {
            v_isLeftDown = false;
        }

        function f_up() {
            v_isLeftDown = false;
        }

        // 오늘의 과제 마우스가 움직이는 만큼 div도 움직임
        // 곧 제대로된 마우스 끌기! (산수문제);
    </script>
</body>

</html>

 

이제 저장을 해야징~

    <script>
        var v_psyPosX; // 마우스 눌렀을 때 div 좌표 저장할 변수
        var v_psyPosY;
        var v_mouseX; // 마우스 눌렀을 때 그때 마우스 좌표 저장할 변수
        var v_mouseY;
    </script>
더보기 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #id_psy {
            position: absolute;
            /* static은 움직이지 않음 */
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="id_psy" onmousedown="f_down()" onmouseout="f_out()" onmousemove="f_move()" onmouseup="f_up()">
        나 성연</div>
    <script>
        window.onload = function () {
            v_psy.style.left = "100px";
            v_psy.style.top = "100px";
        }
        var v_psy = document.getElementById("id_psy");
        var v_isLeftDown = false;  // 왼쪽 버튼 누르지 않은 상황
        var v_psyPosX; // 마우스 눌렀을 때 div 좌표 저장할 변수
        var v_psyPosY;
        var v_mouseX; // 마우스 눌렀을 때 그때 마우스 좌표 저장할 변수
        var v_mouseY;

        function f_down() {
            if (event.button == 0) {
                v_isLeftDown = true;
            }
        }

        function f_move() {
            console.log(v_isLeftDown);
            if (v_isLeftDown) {  //  왼쪽 버튼이 눌려져 있는 상황일 때
                v_psy.style.left = event.clientX + "px";
                v_psy.style.top = event.clientY + "px";
            }
        }
        function f_out() {
            v_isLeftDown = false;
        }

        function f_up() {
            v_isLeftDown = false;
        }

        // 오늘의 과제 마우스가 움직이는 만큼 div도 움직임
        // 곧 제대로된 마우스 끌기! (산수문제);
    </script>
</body>

</html>

 

마우스 눌렀을 때 변수 값 저장

    <script>
            function f_down() {
            if (event.button == 0) {
                v_psyPosX = parseInt(v_psy.style.left);
                v_psyPosY = parseInt(v_psy.style.top);
                v_mouseX = event.clientX;
                v_mouseY = event.clientY;
                v_isLeftDown = true;
            }
        }
    </script>
더보기 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #id_psy {
            position: absolute;
            /* static은 움직이지 않음 */
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="id_psy" onmousedown="f_down()" onmouseout="f_out()" onmousemove="f_move()" onmouseup="f_up()">
        나 성연</div>
    <script>
        window.onload = function () {
            v_psy.style.left = "100px";
            v_psy.style.top = "100px";
        }
        var v_psy = document.getElementById("id_psy");
        var v_isLeftDown = false;  // 왼쪽 버튼 누르지 않은 상황
        var v_psyPosX; // 마우스 눌렀을 때 div 좌표 저장할 변수
        var v_psyPosY;
        var v_mouseX; // 마우스 눌렀을 때 그때 마우스 좌표 저장할 변수
        var v_mouseY;

        function f_down() {
            if (event.button == 0) {
                v_psyPosX = parseInt(v_psy.style.left);
                v_psyPosY = parseInt(v_psy.style.top);
                v_mouseX = event.clientX;
                v_mouseY = event.clientY;
                v_isLeftDown = true;
            }
        }

        function f_move() {
            console.log(v_isLeftDown);
            if (v_isLeftDown) {  //  왼쪽 버튼이 눌려져 있는 상황일 때
                v_psy.style.left = event.clientX + "px";
                v_psy.style.top = event.clientY + "px";
            }
        }
        function f_out() {
            v_isLeftDown = false;
        }

        function f_up() {
            v_isLeftDown = false;
        }

        // 오늘의 과제 마우스가 움직이는 만큼 div도 움직임
        // 곧 제대로된 마우스 끌기! (산수문제);
    </script>
</body>

</html>

 

마우스가 움직인 폭 계산

    <script>
        function f_move() {
            console.log(v_isLeftDown);
            if (v_isLeftDown) {  //  왼쪽 버튼이 눌려져 있는 상황일 때
                // 마우스가 움직인 폭과 넓이
                var v_width = event.clientX - v_mouseX;
                var v_height = event.clientY - v_mouseY;

                v_psy.style.left = v_psyPosX+v_width+"px";
                v_psy.style.top = v_psyPosY+v_height+"px";
                // v_psy.style.left = event.clientX + "px";
                // v_psy.style.top = event.clientY + "px";
            }
        }
    <script>
더보기 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #id_psy {
            position: absolute;
            /* static은 움직이지 않음 */
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="id_psy" onmousedown="f_down()" onmouseout="f_out()" onmousemove="f_move()" onmouseup="f_up()">
        나 성연</div>
    <script>
        window.onload = function () {
            v_psy.style.left = "100px";
            v_psy.style.top = "100px";
        }
        var v_psy = document.getElementById("id_psy");
        var v_isLeftDown = false;  // 왼쪽 버튼 누르지 않은 상황
        var v_psyPosX; // 마우스 눌렀을 때 div 좌표 저장할 변수
        var v_psyPosY;
        var v_mouseX; // 마우스 눌렀을 때 그때 마우스 좌표 저장할 변수
        var v_mouseY;

        function f_down() {
            if (event.button == 0) {
                v_psyPosX = parseInt(v_psy.style.left);
                v_psyPosY = parseInt(v_psy.style.top);
                v_mouseX = event.clientX;
                v_mouseY = event.clientY;
                v_isLeftDown = true;
            }
        }

        function f_move() {
            console.log(v_isLeftDown);
            if (v_isLeftDown) {  //  왼쪽 버튼이 눌려져 있는 상황일 때
                // 마우스가 움직인 폭과 넓이
                var v_width = event.clientX - v_mouseX;
                var v_height = event.clientY - v_mouseY;

                v_psy.style.left = v_psyPosX+v_width+"px";
                v_psy.style.top = v_psyPosY+v_height+"px";
                // v_psy.style.left = event.clientX + "px";
                // v_psy.style.top = event.clientY + "px";
            }
        }
        function f_out() {
            v_isLeftDown = false;
        }

        function f_up() {
            v_isLeftDown = false;
        }

        // 오늘의 과제 마우스가 움직이는 만큼 div도 움직임
        // 곧 제대로된 마우스 끌기! (산수문제);
    </script>
</body>

</html>

'화면구현 > HTML' 카테고리의 다른 글

form  (0) 2020.07.08
클래스속성  (0) 2020.07.08
다양한요소등록법  (0) 2020.07.02
화면색상변경  (0) 2020.07.02
함수리턴  (0) 2020.06.25

'화면구현/HTML'의 다른글

  • 현재글마우스로끌기 완성~

관련글

댓글

티스토리툴바