Mouse Event(마우스 드래그하기)

GW·2023년 9월 6일
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Floating Layer Popup-Mouse Event</title>
    <style type="text/css">
        div.layer{
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            background-color: #ccc;
            border: 1px solid #888;
        }
    </style>
    <script src="./jquery-3.7.1.js"></script>
    <script type="text/javascript">
         $().ready(function(){  
            $("div.layer").mousedown(function(event){
                // $("div.layer").css("z-index", 10)
                // $(this).css("z-index", 999)

                // data-select의 값을 true로 변경
                $(this).data("select", "true")
                //마우스가 다운될 당시의 마우스 좌표를 항당한다.
                $(this).data("x", event.pageX)
                $(this).data("y", event.pageY)
            })
            .mousemove(function(event){
                if($(this).data("select")=="true"){
                    //div에 할당된 마우스의 좌표를 가져온다.
                    var prevX=$(this).data("x")
                    var prevY=$(this).data("y")
                    //마지막 마우스 좌표와 현재 마우스 좌표의 차이를 구한다.
                    var x=event.pageX-prevX
                    var y=event.pageY-prevY
                    //div의 실제 위치를 얻어온다.
                    var divOffset = $(this).offset()
                    //div의 좌표를 이전 좌표와의 차이만큼 더한다
                    x+=divOffset.left
                    y+=divOffset.top
                    //div의 좌표를 수정한다.
                    $(this).css({
                        left: x +"px",
                        top: y +"px"
                    })
                    //마우스의 마지막 좌표를 div에 할당한다.
                    $(this).data("x", event.pageX)
                    $(this).data("y", event.pageY)
                }
            })
            .mouseup(function(){
                $(this).data("select","false")
                console.log($(this).data("select"))
            })
         })
    </script>
</head>
<body>
    <div class="layer" data-select="false">드래그 해보세요1.</div>
    <div class="layer" data-select="false">드래그 해보세요2.</div>
    <div class="layer" data-select="false">드래그 해보세요3.</div>
    <div class="layer" data-select="false">드래그 해보세요4.</div>
</body>
</html>
Mouse Event(마우스 드래그하기)

selector, traversing,DOM_Handling

Keyboard Event

0개의 댓글
