DBILITY

div drag test 본문

front-end & ui/javascript

div drag test

DBILITY 2021. 5. 14. 19:08
반응형

https://ko.javascript.info/size-and-scroll

 

요소 사이즈와 스크롤

 

ko.javascript.info

위 사이트의 정리 내용 중 일부 발췌.

 

offsetParent – 위치 계산에 사용되는 가장 가까운 조상 요소나 td, th, table, body
offsetLeft와 offsetTop – offsetParent 기준으로 요소가 각각 오른쪽(좌측으로 부터), 아래쪽(상단으로 부터)으로 얼마나 떨어져 있는지를 나타내는 값
offsetWidth와 offsetHeight – 테두리를 포함 요소 '전체’가 차지하는 너비와 높이
clientLeft와 clientTop – 요소 제일 밖을 감싸는 영역과 요소 안(콘텐츠 + 패딩)을 감싸는 영역 사이의 거리를 나타냄. 대부분의 경우 왼쪽, 위쪽 테두리 두께와 일치하지만, 오른쪽에서 왼쪽으로 글을 쓰는 언어가 세팅된 OS에선 clientLeft에 스크롤바 두께가 포함됨
clientWidth와 clientHeight – 콘텐츠와 패딩을 포함한 영역의 너비와 높이로, 스크롤바는 포함되지 않음
scrollWidth와 scrollHeight – clientWidth, clientHeight 같이 콘텐츠와 패딩을 포함한 영역의 너비와 높이를 나타내는데, 스크롤바에 의해 숨겨진 콘텐츠 영역까지 포함됨
scrollLeft와 scrollTop – 스크롤바가 오른쪽, 아래로 움직임에 따라 가려지게 되는 요소 콘텐츠의 너비와 높이
스크롤바를 움직일 수 있게 해주는 scrollLeft와 scrollTop을 제외한 모든 프로퍼티는 읽기 전용입니다.

 

<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }

        .container {
            position: absolute;
            margin: 0;
            width: 100%;
            min-height: 100%;
            box-shadow: 0 0 0 1px #000 inset;
        }

        .layer {
            position: absolute;
            width: 200px;
            height: 200px;
            text-align: center;
            padding: 0;
            border : 1px dotted black;
        }

        .border-red {
            cursor: all-scroll;
            border-color: red;
        }

        .border-black {
            cursor: default;
            border-color: black;
        }

        img {
            max-width: 100%;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="layer">
        <img src="https://dummyimage.com/200x200/fff/000.png&text=Draggable1" alt="">
    </div>
    <div class="layer">
        <img src="https://dummyimage.com/200x200/fff/000.png&text=Draggable2" alt="">
    </div>
    <div class="layer">
        <img src="https://dummyimage.com/200x200/fff/000.png&text=Draggable3" alt="">
    </div>
    <div class="layer">
        <img src="https://dummyimage.com/200x200/fff/000.png&text=Draggable4" alt="">
    </div>
    <div class="layer">
        <img src="https://dummyimage.com/200x200/fff/000.png&text=Draggable5" alt="">
    </div>
</div>

<script>
    const log = function () {
        for (argument of arguments) {
            console.log(argument);
        }
    };

    let mouseMoveX = 0, mouseMoveY = 0, mouseDownX = 0, mouseDownY = 0;

    window.addEventListener("load", e => {
        let layers = document.getElementsByClassName('layer');

        let container = document.getElementsByClassName('container')[0];
        for (let layer of layers) {

            layer.addEventListener('mouseover', e => {
                layer.classList.remove('border-black');
                layer.classList.add('border-red');
            });

            layer.addEventListener('mouseout', e => {
                layer.classList.remove('border-red');
                layer.classList.add('border-black');
            });

            layer.addEventListener('mousedown', e => {
                mouseMoveX = 0, mouseMoveY = 0, mouseDownX = 0, mouseDownY = 0;
                e.preventDefault();
                mouseDownX = e.clientX;
                mouseDownY = e.clientY;
                document.onmousemove = e => {
                    e.preventDefault();
                    mouseMoveX = mouseDownX - e.clientX;
                    mouseMoveY = mouseDownY - e.clientY;
                    mouseDownX = e.clientX;
                    mouseDownY = e.clientY;
                    let targetX = layer.offsetLeft - mouseMoveX;
                    let targetY = layer.offsetTop - mouseMoveY;
                    let availX = container.clientWidth - layer.clientWidth;
                    let availY = container.clientHeight - layer.clientHeight;
                    let offsetLeft = (targetX >= 0 && targetX <= availX ? targetX : targetX > availX ? availX : 0);
                    let offsetTop = (targetY >= 0 && targetY <= availY ? targetY : targetY > availY ? availY : 0);
                    layer.style.left = offsetLeft + 'px';
                    layer.style.top = offsetTop + 'px';
                };
                document.onmouseup = () => {
                    document.onmousemove = null;
                    document.onmouseup = null;
                    mouseMoveX = 0, mouseMoveY = 0, mouseDownX = 0, mouseDownY = 0;
                };
            });

        }

    });

</script>
</body>
</html>

반응형

'front-end & ui > javascript' 카테고리의 다른 글

div move + rotate + resize test  (0) 2021.05.20
div rotate test  (0) 2021.05.18
EventSource + Spring Server Sent Event  (0) 2021.05.12
pure javascript file upload 테스트  (0) 2021.05.12
ajax download  (0) 2019.06.03
공유하기 링크
'front-end & ui/javascript' Related Articles more
Comments