Haroop Webagency team BICTOR

원격 및 파견 개발팀분들을 위한 하룹소속 개발자전용 빅터 오픈소스 커뮤니티입니다

이곳은 하룹 개발팀 소속 직원들에 전체 개발기술력 및 전체 평균 능력치 강화를 위한, 빅터팀 리드개발자들에 오픈소스 개발 커뮤니티 공간입니다, 만약 고객이시라면 여기를 이용해주세요.

제목
드래그앤드랍 구현 방법 문의
작성자
조던
작성일
2022-08-19 11:34
조회
48
답변완료
안녕하세요 드래그앤드랍을 구현해보려하는데 개념이 안잡혀있어서ㅠ
하룹코어내에 조금만 수정하려고 해도 어디서부터 건드려야 할지도 모르겠네요ㅠㅠ
혹시 드래그앤드랍 개념을 잡기위한 예제나 설명좀 부탁드릴수있을까요??ㅠㅠ
전체 1

  • 2022-08-19 16:44

    안녕하세요, 사실상 기존에 드래그앤드랍 개념이 안잡혀있으시다면, 실무투입에 기간이 매우 오래걸리실것으로 파악됩니다..
    그렇기에 실무적으로 완성시키려면 최소 1년은 각 상황별 하나둘씩 드래그앤드랍 소스에 원리에 익숙해지셔야 하는데
    일단 드래그앤드랍에서 객체이동에 대한 개념부터 잡으시면 조금이나마 작동원리나 구성
    그리고 스크립트를 짜서 구현하는것에 그나마 조금 더 빨리 익숙해지지 않으실까 생각이 됩니다.
    아래 소스를 그대로 적용해보시고, 스크립트들을 하나둘씩 수정해보시면 감을 잡으실수있으실거에요.
    드래그앤드랍은 소스가 어려운거라기보다, 각 상황별로 처리해줘야할것들이 하나둘씩 늘어나면서 복잡해 보일뿐
    오랜기간동안 자주 짜보시면 익숙해지기에 그렇게 어렵진 않으나, 초반에는 진입장벽이 상당히 높은 편이기도 합니다.
    특히 전체적 개념이 안잡혀있으시면, 엄청나게 진입장벽이 높으실수있습니다.
    우선 아래 예제를 적용해보시고 객체이동에 대한 감을 좀 잡으시면 초반에 도움이 많이 되실거에요.
    또한 지금 바로 뭔가 만들려고 하지마시고, 드래그앤드랍에 익숙해지시려면 우선은 드래그앤드랍 스크립트를 설계하는것에
    익숙해지시는 기간이 상당히 많이 필요하실것입니다. 복잡하고 난이도가 높은편이지만 어느지점이 지나고
    정말 많은 상황에 변수들과 조건들을 구성해보시다보면, 자신감이 붙을 때가 오실거에요.
    우선 객체이동부터 하나하나 차근차근 이해를 해보시길 바라겠습니다.

    우선 이미지 두장을 준비해주시구요.
    여기선 축구골대와 축구공을 이용한다고 가정하겠습니다.
    이미지하나는 축구골대, 하나는 축구공 이미지를 아무거나 준비해주세요.

    하나의 이미지엔 id="gate" class="droppable"
    다른 이미지엔 id="ball" 를 설정해주세요.
    그리고 아래 스크립트를 적용하시면 기본적인 드래그앤드랍의 객체이동을 구현하실 수 있습니다.

    스크립트
    let currentDroppable = null;
    ball.onmousedown = function (event) {

    let shiftX = event.clientX - ball.getBoundingClientRect().left;
    let shiftY = event.clientY - ball.getBoundingClientRect().top;

    ball.style.position = 'absolute';
    ball.style.zIndex = 1000;
    document.body.append(ball);

    moveAt(event.pageX, event.pageY);

    function moveAt(pageX, pageY) {
    ball.style.left = pageX - shiftX + 'px';
    ball.style.top = pageY - shiftY + 'px';
    }

    function onMouseMove(event) {
    moveAt(event.pageX, event.pageY);

    ball.hidden = true;
    let elemBelow = document.elementFromPoint(event.clientX, event.clientY); // elemBelow : 드롭할 수 있는 공의 아래 요소, 축구골대
    ball.hidden = false;

    // clientX, clientY 가 윈도우 밖에 있으면, elementFromPoint 는 null 반환
    if (!elemBelow) return;

    // 잠재적으로 드롭할 수 있는 요소를 'droppable' 클래스로 지정한다. 축구 골대
    let droppableBelow = elemBelow.closest('.droppable');

    // 둘다 null 일 수 있다. 들어오거나, 나가거나에 해당할 때,
    // currentDroppale = null : 축구 골대 밖에 있을 때,
    // droppableBelow = null : 이벤트 동안 축구 골대 안에 없을 때,

    if (currentDroppable != droppableBelow) {
    if (currentDroppable) {
    // 축구 골대 밖에 있을 때 강조 제거
    leaveDroppable(currentDroppable);
    }
    currentDroppable = droppableBelow;
    if (currentDroppable) { // null if we're not coming over a droppable now
    // 축구 골대 안으로 들어오는 것을 처리하는 로직
    enterDroppable(currentDroppable);
    }
    }
    }

    document.addEventListener('mousemove', onMouseMove);

    ball.onmouseup = function () {
    document.removeEventListener('mousemove', onMouseMove);
    ball.onmouseup = null;
    };

    };

    function enterDroppable(elem) {
    elem.style.background = 'pink';
    }

    function leaveDroppable(elem) {
    elem.style.background = '';
    }

    ball.ondragstart = function () {
    return false;
    };

    단, 드래그앤드랍을 실무에 적용하시려면... 솔직히 꽤 오랜시간이 걸리실것같으므로...
    차라리 요청을 주시면, 고급개발팀이 투입해서 개발해드리는것이 현재로써는 좀 더 효율적일순 있을거같습니다.
    현재 구현하시려는 부분을 하룹넷 개발지원에 정확히 말씀해주시면, 고급개발팀에서 투입해서 도움을 드릴수있도록 하겠습니다