Written by Nostrss
on December 17, 2022

[월간코딩] #4 Drag & Drop

Drag & Drop 사전 조사

HTML 드래그 앤 드롭 Web API

Drag & Drop 이벤트 종류

drag : 요소나 텍스트 블록을 드래그 할 때 발생한다.
dragend : 드래그를 끝냈을 때 발생한다. (마우스 버튼을 떼거나 ESC 키를 누를 때)
dragenter : 드래그한 요소나 텍스트 블록을 적합한 드롭 대상위에 올라갔을 때 발생한다.
dragleave : 드래그하는 요소나 텍스트 블록이 적합한 드롭 대상에서 벗어났을 때 발생한다.
dragover : 요소나 텍스트 블록을 적합한 드롭 대상 위로 지나갈 때 발생한다. (매 수백 밀리초마다 발생한다.)
dragstart : 사용자가 요소나 텍스트 블록을 드래그하기 시작했을 때 발생한다.
drop : 요소나 텍스트 블록을 적합한 드롭 대상에 드롭했을 때 발생한다.

사용 및 구현 해보기

드래그 앤 드랍 간단 구현 바로 보기

깃허브 바로 가기

UI

알파벳이 적혀있는 리스트 박스 5개 준비
드래그 할 요소에 draggable=true 해줄 경우 드래그 시 요소를 잡아 끄는 듯한 효과를 줄 수 있다.

import styled from 'styled-components';

const WrapperBox = styled.ul`
  display: flex;
  flex-direction: row;
  list-style: none;
`;

const Box = styled.li`
  width: 100px;
  height: 100px;
  background-color: pink;
  font-size: 20px;
  line-height: 100px;
  font-weight: bold;
  text-align: center;
  color: white;
  margin-right: 10px;
`;

...(생략)

 <div>
      <WrapperBox className='list'>
        <Box draggable='true'>a</Box>
        <Box draggable='true'>p</Box>
        <Box draggable='true'>p</Box>
        <Box draggable='true'>e</Box>
        <Box draggable='true'>l</Box>
      </WrapperBox>
  </div>

ul Element 불러오기

const ulElement: HTMLUListElement | null = document.querySelector('.list');
setIsList(ulElement);

드래그 Element 정보 얻기

현재 마우스로 잡고 드래그 하는 박스의 Index 정보를 찾아 저장

isList?.addEventListener('dragstart', (event) => {
      const obj = event.target as typeof event.target & IEventTarget;
      setIsPicked(obj);
      if (obj) {
        setIsIndex([...obj.parentNode.children].indexOf(obj));
      }
    });

dragover 시 예상치 못한 이벤트 방지하기

isList?.addEventListener('dragover', (event) => {
  event.preventDefault();
});

Drop시 Element 옮기기

index 값에 따라 앞에 둘지 뒤에 둘지 결정

isList?.addEventListener('drop', (event) => {
      const obj = event.target as typeof event.target & IEventTarget;
      if (obj) {
        const index = [...obj.parentNode.children].indexOf(obj);
        if (isIndex !== null) {
          if (index > isIndex) {
            obj.after(isPicked);
          } else {
            obj.before(isPicked);
          }
        }
      }
    });

간단히 구현을 해봤는데, 몇가지 오류가 있어보이지만 일단 드래그 앤 드랍은 작동하는 것 같다.

하지만 트리구조에 드래그 앤 드랍을 적용하려면 쉽지 않을 것 같다.

드래그 앤 드랍을 처음 구현하고 감을 잡아 본것에 일단 만족

← → Top