메뉴 건너뛰기

조회 수 444 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

jQuery-ui를 사용하여 드래그 이벤트와 리사이즈 이벤트를 추가 할 수 있는데, 직사각형의 영역을 서로 침범할 경우 기존 위치로 원위치 시키는 방법을 알아보겠습니다.

 

겹침 처리 방법

1. 일반 2차원 배열에 0으로 채워넣고, 도형이 있는 위치는 1로 채웁니다.

 

도형이 존재하는 x,y에 넓이 높이 만큼 영역을 1로 채웁니다.

 

 

2. 도형 위치마다 1로 더하기때문에 겹치는 영역이 생기면 아래처럼 2가 존재하게 됩니다.

 

겹치는 영역은 2가 된다.

 

 

3. 각 도형마다의 위치와 넓이, 높이를 기억하고 있다가 겹치면 원위치 시킨다.

 

 

실적용 소스

html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #box {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            background: #eee;
        }

        #box .rect {
            position: absolute;
            width: 50px;
            height: 50px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="rect" idx=0></div>
        <div class="rect" idx=1></div>
    </div>
    <script src="./draggable_rect.js"></script>
</body>

</html>

 

draggable_rect.js

var rectArr = [];
var canvasArr = [];

$(function () {
    //초기 세팅
    for (i = 0; i < $(".rect").length; i++) {
        var rect = $($(".rect")[i])
        var idx = rect.attr("idx");
        var x = rect.offset().left;
        var y = rect.offset().top;

        var left = rect.css("left");
        var top = rect.css("top");
        var w = rect.width();
        var h = rect.height();
        rectArr[idx] = { x: x, y: y, left: left, top: top, w: w, h: h };
    }



    var width = $("#box").width();
    var height = $("#box").height();
    for (i = 0; i < height; i++) {
        canvasArr[i] = new Array(width);
    }

    for (i = 0; i < height; i++) {
        for (j = 0; j < width; j++) {
            canvasArr[i][j] = 0;
        }
    }
});

$(".rect").draggable({
    containment: "parent",
    start: function (event, ui) {

    },
    stop: function (event, ui) {
        var idx = $(this).attr("idx");
        var left = $(this).css("left");
        var top = $(this).css("top");
        var x = $(this).offset().left;
        var y = $(this).offset().top;
        var w = $(this).width();
        var h = $(this).height();
        var thisObj = { x: x, y: y, w: w, h: h, idx: idx };
        if (overLapChecker(".rect", thisObj)) {
            //통과
            rectArr[idx] = { x: x, y: y, left: left, top: top, w: w, h: h };
        } else {
            //겹침 - 초기화
            var obj = rectArr[idx];
            $(".rect[idx=" + idx + "]").css("top", obj.top);
            $(".rect[idx=" + idx + "]").css("left", obj.left);
        }
    }
}).resizable({
    containment: "parent",
    start: function (event, ui) {

    },
    stop: function (event, ui) {
        var idx = $(this).attr("idx");
        var left = $(this).css("left");
        var top = $(this).css("top");
        var x = $(this).offset().left;
        var y = $(this).offset().top;
        var w = $(this).width();
        var h = $(this).height();
        var thisObj = { x: x, y: y, w: w, h: h, idx: idx };
        if (overLapChecker(".rect", thisObj)) {
            //통과
            rectArr[idx] = { x: x, y: y, left: left, top: top, w: w, h: h };
        } else {
            //겹침 - 초기화
            var obj = rectArr[idx];
            $(".rect[idx=" + idx + "]").css("top", obj.top);
            $(".rect[idx=" + idx + "]").css("left", obj.left);
            $(".rect[idx=" + idx + "]").css("width", obj.w);
            $(".rect[idx=" + idx + "]").css("height", obj.h);
        }
    }
})



function overLapChecker(className, thisObj) {
    var len = $(className).length;
    if (len > 0) {
        var thisMapArr = JSON.parse(JSON.stringify(canvasArr)); //빈 배열을 복사한다.
        var x = thisObj.x;
        var y = thisObj.y;
        var w = thisObj.w;
        var h = thisObj.h;
        for (i = y; i < y + h; i++) {
            for (j = x; j < x + w; j++) {
                thisMapArr[i][j] = thisMapArr[i][j] + 1;
            }
        }
        for (z = 0; z < len; z++) {
            var idx = $($(className)[z]).attr("idx");
            if (idx == thisObj.idx) {
                continue;
            } else {
                var checkerArr = JSON.parse(JSON.stringify(thisMapArr));
                var x2 = $(".rect[idx=" + idx + "]").offset().left;
                var y2 = $(".rect[idx=" + idx + "]").offset().top;
                var w2 = $(".rect[idx=" + idx + "]").width();
                var h2 = $(".rect[idx=" + idx + "]").height();

                for (i = y2; i < y2 + h2; i++) {
                    for (j = x2; j < x2 + w2; j++) {
                        checkerArr[i][j] = checkerArr[i][j] + 1;
                        if (checkerArr[i][j] > 1) {
                            return false;
                        }
                    }
                }
            }
        }

    }
    return true;
}

드래그, 리사이즈 이벤트 처리를 하고 각 도형의 위치를 특정 배열에 담아둡니다.

 

드래그 또는 리사이즈 이벤트가 멈추면 멈추는 동시에 위치를 체크합니다. 겹치는 동선이 존재하여 배열에(2)가 처리되면 원위치 시킵니다.

 

적용 모습

 

 

 

겹침이 방지되었다!

  1. No Image 25Mar
    by
    2021/03/25 Views 321 

    기본 동작 막기

  2. jQuery - 드래그앤드롭(DragAndDrop)을 통한 파일 업로드

  3. jQuery - checkbox 전체 선택, 해제 기능 및 단일 체크박스가 해제되었을때 전체 선택 해제 하기

  4. jQuery - ajax xhr을 활용한 파일 업로드 진행 상태 확인하기

  5. 09Mar
    by 조쉬
    2021/03/09 Views 444 

    jQuery - 드래그, 리사이즈 이벤트에 따른 영역 침범 막기

  6. jQuery - 클릭이벤트 동적 처리하기($("").click(), on('click') 차이)

  7. jQuery - radio, checkBox값 가져오기, 선택하기, 제어 등

  8. No Image 09Mar
    by
    2021/03/09 Views 1539 

    jQuery - ajaxSubmit 사용법 및 유의사항(페이지 리로드 현상)

  9. No Image 25Nov
    by
    2020/11/25 Views 1540 

    이미지 회전, rotate();

  10. No Image 25Nov
    by
    2020/11/25 Views 1057 

    이미지 확대/축소

  11. No Image 24Aug
    by
    2020/08/24 Views 1001 

    사업자 번호를 입력하면 자동으로 하이픈을 붙여줍니다.

  12. No Image 27Aug
    by
    2019/08/27 Views 1783 

    jquery 자식창에서 부모창으로 값 전달

  13. No Image 04Jun
    by
    2019/06/04 Views 885 

    jQuery 일반적 팁

  14. No Image 04Jun
    by
    2019/06/04 Views 790 

    JS 타이머 샘플

  15. No Image 04Jun
    by
    2019/06/04 Views 831 

    JS 날짜 자료 비교

  16. No Image 04Jun
    by
    2019/06/04 Views 892 

    텍스트 필드에 기본글이 마우스 클릭하면 지워지게 하기 폼필드 소스 내에 아래 태그를 삽입한다.

  17. No Image 04Jun
    by
    2019/06/04 Views 838 

    //ex)텍스트 박스 포커스 활성, 비활성 이벤트

  18. No Image 04Jun
    by
    2019/06/04 Views 744 

    JS 첵박스 샘플

  19. No Image 04Jun
    by
    2019/06/04 Views 836 

    체크박스 전체선택/해지

  20. No Image 21May
    by
    2019/05/21 Views 3153 

    jquery 드래그 앤 드롭 파일 업로드

Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved