드래그 앤 드롭 - JavaScript

오늘의 실습

: 드래그 앤 드롭

 

HTML 과 CSS 설정

 

매우 간단하다

 

 

스타일은 대충 이렇게 설정해주자

 

JavaScript

 

1. 변수 설정

 

일단 각각의 컨텐츠 요소들을 드래그가 가능하게 끔 이벤트를 지정해야 하니 하나의 배열변수로 잡아줘야한다. 그러고 나서 드래그로 가져온 컨텐츠를 놓을 공간을 (dropzone이라고 명명) 변수로 설정해준다.

        let content = document.querySelectorAll('.content1, .content2, .content3');
        let dropzone = document.querySelector('.dropzone');

 

2.이벤트 할당

 이벤트 할당은 contents와 dropzone 모두에게 적용해주어야 하는데 컨텐츠의 경우 드래그를 시작하는 순간과 드래그를 종료하는 순간 모두 이벤트를 할당해주어야 하며 배열인만큼 반복문을 통해 이벤트 지정을 해주면 된다.

        for (var i = 0; i < content.length; i++) {
            content[i].addEventListener('dragstart', handleDragStart);
            content[i].addEventListener('dragend', handleDragEnd);
        }
        //3. content에 dragstart 이벤트를 할당하고, handleDragStart 함수를 실행(드래그가 시작될 때)
        //dragend 이벤트를 할당하고, handleDragEnd 함수를 실행한다. (드래그가 끝날 때)

 

 

3.함수 선언

dropzone의 경우에는 앞에서 이벤트 할당을 하지않고 이벤트할당과 함수선언을 동시에 했다.

 

3-1 컨텐츠가 공간에 드래그로 호버링 될 때

드래그한 요소가 dropzone위에 호버링 할 때와 호버링을 종료할 때를 설정해주면 되는데 여기서 중요한건 매개변수를 e로 가지는 함수를 선언해 e.preventDefault();를 설정해주어야 한다. 해당 코드를 설정해 줌으로써 

(폼 제출 방지, 링크 클릭시 페이지 이동 방지, 드롭 불가능 상태 해제) 

등의 이벤트가 발생하는 것을 방지할 수 있기 때문이다.

 

또한 공간에 hovered라는 클래스를 classList로 임의로 추가해주자
(hovered라는 임의의 클래스 이름을 추가해줘서 해당 상황이 나타났을 때에만 CSS를 적용해 UX적인 이점을 가져갈 수 있다)

   dropzone.addEventListener('dragover', function (e) {
      e.preventDefault(); // 기본 동작 방지 
      //폼 제출 방지, 링크 클릭시 페이지 이동 방지, 드롭 불가능 상태 해제
      dropzone.classList.add('hovered');
    });​

3-2 컨텐츠가 공간을 빠져나갔을 때
 - 호버링 될 때 추가해놨던 클래스 이름인 hovered를 공간에서 제거해줌으로써 사용자가 본인의 인터랙션이 종료되었음을 알 수 있다.

    dropzone.addEventListener('dragleave', function () {
      dropzone.classList.remove('hovered');
    });

 

 

 

3-3 컨텐츠가 공간에 드랍됐을 때
 - 마찬가지로 매개변수로 e를 받아 (다르게 해도 되는데 그냥 e라고 외우자) e.preventDefault();를 작성해서 e=이벤트를 다 초기화 시키자 
 - 드래깅 되고있는 요소를 찾기위해 클래스 이름에 dragging이라는 임의의 이름이 붙어있는 요소를 쿼리셀렉터로 찾아줘서 변수화 시킨다
 - 그런 다음 공간에 방금 변수화  시킨 요소를 appendChild를 이용해 집어넣는다.
 - 호버링 될 때 추가해놨던 클래스 이름인 hovered를 공간에서 제거해줌으로써 사용자가 본인의 인터랙션이 종료되었음을 앎

    //아이템을 드래그 시작했을 때 dragging 클래스가 붙는다, 고로
    //dropzone 내부에서 querySelector('.dragging')하면 내가 드래그하고 있는 아이템이 선택이 된다.
    dropzone.addEventListener('drop', function (e) {
      e.preventDefault();
      var dragging = document.querySelector('.dragging');
      dropzone.appendChild(dragging);
      dropzone.classList.remove('hovered');
    });

    //아이템을 드롭존에 드롭하고 난 후 해당 아이템에 대한 처리(없앴다)

 

 

3-4 요소를 드래그해서 잡았을 때

 

 - 클릭한 요소를 찾기위해 this 키워드를 사용하고 this를 통해 찾은 요소에 .classList를 이용해 클래스 이름에 dragging이라는 임의의 이름을 add한다

 

    function handleDragStart() {
      this.classList.add('dragging');
    }

 

 

3-5 요소를 드래그해서 놓았을 때

 - 드래그 한 요소를 찾기 위해 마찬가지로 this키워드를 사용해 해당 요소의 클래스 이름에 붙여놨던 dragging이라는 이름을 remove한다
 (이렇게 함으로써 공간에 컨텐츠를 드랍하거나 또는 아무데나 놓는 행위, 즉 드래그를 놓는 행위를 했을 때 dragging이라는 이름을 지워서 공간에 요소가 드랍될 때 필요하던 클래스 이름인 dragging을 가져올 때 혼동되지 않도록 한다)

    function handleDragEnd() {
      this.classList.remove('dragging');
    }

 

실행 해보기

드래그한 요소들이 dropzone으로 잘 이동하는 모습이다