순수 바닐라 JavaScript로 드래그 앤 드롭 요소 만들기

Shreyas Patil2022-08-04 · 10 min read

JavaScript은 24개 이상의 프레임워크와 약 84개의 라이브러리를 갖춘 가장 인기 있는 프로그래밍 언어 중 하나입니다. 모든 브라우저에서 기본적으로 지원하는 유일한 프로그래밍 언어이기도 합니다. 게다가 이 언어는 동적 타이핑을 지원하며 렌더링과 애니메이션에 매우 적합합니다. JavaScript를 활용하여 프론트엔드에 대화형 동작을 추가하고, 백엔드를 제어하고, 웹 및 모바일 애플리케이션을 만드는 등 다양한 작업을 수행할 수 있습니다. 모든 웹사이트에 효과를 추가하고 맞춤 설정할 수 있는 옵션 덕분에 이 언어는 전 세계 개발자들에게 사랑받고 있습니다.

이 가이드에서는 순수 바닐라 자바스크립트(Vanilla JavaScript)를 사용하여 드래그 앤 드롭 요소를 만드는 단계를 안내합니다. 또한 한 단계 더 나아가, 다음을 사용하여 "Morning Scheduler" 앱을 빌드해 보겠습니다: HTML 드래그 앤 드롭 API 이벤트 핸들러.

사전 요구 사항

이 튜토리얼을 따라 하려면 다음이 필요합니다:

JavaScript의 기본 지식.
다음 기술에 대한 이해가 있으면 HTML 및 CSS 큰 도움이 됩니다.

1단계: 새 프로젝트 생성

두 개의 자식 요소를 가진 컨테이너를 생성하는 것으로 시작합니다. 첫 번째 자식 요소는 드래그하는 데 사용하고, 두 번째 자식 요소는 드래그된 요소를 저장하는 데 사용합니다.

참고: 이 튜토리얼에서는 컨테이너를 드래그된 모든 요소를 보관하는 저장소로 취급합니다. 간단히 말해, 첫 번째 자식에서 드래그된 모든 요소는 두 번째 자식으로 드롭됩니다.

$ mkdir drag-and-drop-demo

1	$ mkdir drag-and-drop-demo

다음으로, cd 명령어를 사용하여 디렉토리를 drag-and-drop-demo 폴더로 변경합니다:

$ cd drag-and-drop-demo

1	$ cd drag-and-drop-demo

2단계: 초기 설정

이 튜토리얼에서는 HTML, CSS, JavaScript 파일을 생성하고 서로 연결할 것입니다. 먼저 파일 이름을 각각 index.html, styles.css, 및 scripts.js 파일로 지정합니다.

다음으로, “My Morning Planner” 타이틀을 index.html 파일에 추가합니다:

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>My Morning Planner</title>
    </head>

    <body>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>My Morning Planner</title>

</head>

<body>

</body>

</html>

다음으로, CSS를 연결하고 HTML에 JavaScript를 추가합니다:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="styles.css">
        <script src="script.js" defer></script>
        <title>My Morning Planner</title>
    </head>

    <body>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>My Morning Planner</title>

</head>

<body>

</body>

</html>

이제 초기 컨테이너를 생성하고 드래그 앤 드롭할 요소를 추가하겠습니다. 다음 속성을 설정해야 합니다. draggable="true", 그리고 드래그하거나 드롭할 항목 목록을 추가합니다.

다음으로, 아래 코드 줄을 <body> 태그 안에 추가합니다:

<!DOCTYPE html>

<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
    <title>나의 아침 플래너</title>
</head>

<body>
    <div class="container">
    <h1><center>나의 아침 플래너</center></h1>
    <h2 class="draggable" draggable="true">체육관 가기</h2>
    <h2 class="draggable" draggable="true">30분 동안 독서하기</h2>
    <h2 class="draggable" draggable="true">오트밀 준비하기</h2>
</div>

<div class="container">
    <h2 class="draggable" draggable="true">찬물로 샤워하기</h2>
    <h2 class="draggable" draggable="true">하루 시작하기</h2>
</div>

</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</div>

</body>

</html>

저장하고 닫습니다. index.html 파일. 그 후, 브라우저에서 index.html 파일을 열면 다음과 같은 페이지가 열리는 것을 볼 수 있습니다:

다음으로, CSS를 사용하여 index.html 파일을 스타일링하여 보기 좋게 만들어 보겠습니다.

3단계: CSS를 사용한 스타일링

다음으로, index.html 파일에 포함된 모든 요소에 스타일을 추가합니다:

body {
    margin: 0;
}

.container {
    background-color: #DEB887;
    padding: 1rem;
    margin-top: 1rem;
}

.draggable {
    padding: 1rem;
    background-color: #FAF0E6;
    border: 1px solid #708090;
    cursor: move;
}

body {

margin: 0;

}

.container {

background-color: #DEB887;

padding: 1rem;

margin-top: 1rem;

}

.draggable {

padding: 1rem;

background-color: #FAF0E6;

border: 1px solid #708090;

cursor: move;

}

브라우저에서 index.html 파일을 열고 출력을 확인해 보세요:

Creating Drag and Drop Elements with Pure, Vanilla JavaScript 1

구조화와 스타일 추가를 완료했지만, 요소들은 여전히 정적입니다. 즉, 동적인 기능을 추가하기 전까지는 요소를 이동하거나 스크롤할 수 없습니다. 다음 단계에서는 JavaScript와 동적 동작을 도입하겠습니다.

4단계: JavaScript 도입

이 단계에서는 JavaScript를 소개하고 모든 드래그 요소를 기능하도록 만들 것입니다. JS 파일에서 필요한 요소를 설정합니다. 각각 요소를 드래그 앤 드롭하기 위해 draggable 및 containers를 정의해 보겠습니다.

다음 두 줄의 코드를 scripts.js 파일에 추가합니다:

const draggables = document.querySelectorAll('.draggable')
const containers = document.querySelectorAll('.container')

1 2	const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container')

다음으로, 모든 이벤트 리스너를 설정합니다. 먼저 “dragstart” 요소를 첫 번째 이벤트 리스너로 추가하여 클래스 목록을 add합니다. 마찬가지로, “dragend” 요소를 두 번째 이벤트 리스너로 추가하여 클래스 목록을 remove합니다.

다음 EventListeners를 scripts.js 파일에 추가합니다:

const draggables = document.querySelectorAll('.draggable')
const containers = document.querySelectorAll('.container')

draggables.forEach(draggable => {
    draggable.addEventListener('dragstart', () => {
        draggable.classList.add('dragging')
    })

draggable.addEventListener('dragend', () => {
    draggable.classList.remove('dragging')
    })
})

const draggables = document.querySelectorAll('.draggable')

const containers = document.querySelectorAll('.container')

draggables.forEach(draggable => {

draggable.addEventListener('dragstart', () => {

draggable.classList.add('dragging')

})

draggable.addEventListener('dragend', () => {

draggable.classList.remove('dragging')

})

다음으로, 요소를 가리키고 이동하기 위한 “dragover” EventListener를 추가합니다. draggable 요소를 querySelector를 사용하여 설정한 다음, 드래그 가능한 요소를 현재 컨테이너에 추가합니다:

// …
containers.forEach(container => {
    container.addEventListener('dragover', () => {
        const draggable = document.querySelector('.dragging')
    })
})

// …

containers.forEach(container => {

container.addEventListener('dragover', () => {

const draggable = document.querySelector('.dragging')

})

기본적으로 요소 내부에 드롭하는 것은 비활성화되어 있습니다. 이를 활성화하려면 e.preventDefault를 사용하세요:

// …
containers.forEach(container => {
    container.addEventListener('dragover', e => {
        e.preventDefault()
        const draggable = document.querySelector('.dragging')
        container.appendChild(draggable)
    })
})

// …

containers.forEach(container => {

container.addEventListener('dragover', e => {

e.preventDefault()

const draggable = document.querySelector('.dragging')

container.appendChild(draggable)

})

다음으로, 마우스 위치를 결정할 요소를 만듭니다. 먼저 두 개의 매개변수를 받는 getDragAfterElement 함수를 만드는 것부터 시작합니다. 첫 번째 매개변수는 container이고, 두 번째 매개변수인 y는 마우스의 y축 위치를 처리합니다. 이제 querySelectorAll 함수를 사용하여 드래그 가능한 요소를 가져옵니다. 컨테이너 내부의 모든 드래그 가능한 요소를 가리키는 draggableElements를 정의합니다:

// …
function getDragAfterElement(container, y) {
    const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')]
}

// …

function getDragAfterElement(container, y) {

const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')]

}

다음으로, 드래그 가능한 요소 목록을 순회하고 마우스 커서 뒤에 있는 단일 요소를 지정할 reduce 함수를 호출합니다. 다음으로, 첫 번째 요소를 return합니다. 이때 첫 번째 요소를 closest로, 두 번째 요소를 child로 추가하여 reduce 함수를 반환합니다. 또한, offset을 구하고 조건을 추가합니다.

다음 코드 줄을 다음에 추가합니다: scripts.js 파일:

// …
    return draggableElements.reduce((closest, child) => {
        const box = child.getBoundingClientRect()
        const offset = y - box.top - box.height / 2
        if (offset < 0 && offset > closest.offset){
            return { offset: offset, element: child }
        } 
        else {
            return closest
        }
    }, { offset: Number.NEGATIVE_INFINITY}).element
}

// …

return draggableElements.reduce((closest, child) => {

const box = child.getBoundingClientRect()

const offset = y - box.top - box.height / 2

if (offset < 0 && offset > closest.offset){

return { offset: offset, element: child }

}

else {

return closest

}

}, { offset: Number.NEGATIVE_INFINITY}).element

}

마지막 부분에서는 조건을 설정하고 AfterElements를 확인합니다. AfterElements를 if-else 조건문을 사용하여 확인하고, 만약 이것이 null로 설정되어 있다면, appendChild를 사용하여 리스트 끝에 자식을 추가합니다. 그렇지 않으면, 요소 draggable 및 afterElement를 매개변수로 insertBefore 함수에 추가합니다.

이것을 다음에 포함시키세요: scripts.js 파일:

// … 
containers.forEach(container => { 
    container.addEventListener('dragover', e =>{ 
        e.preventDefault() 
        const afterElement = getDragAfterElement(container, e.clientY) 
        const draggable = document.querySelector('.dragging') 
        if (afterElement == null) { 
            container.appendChild(draggable) 
        } 
        else {  
            container.insertBefore(draggable, afterElement) 
        } 
    }) 
})

// …

containers.forEach(container => {

container.addEventListener('dragover', e =>{

e.preventDefault()

const afterElement = getDragAfterElement(container, e.clientY)

const draggable = document.querySelector('.dragging')

if (afterElement == null) {

container.appendChild(draggable)

}

else {

container.insertBefore(draggable, afterElement)

}

})

이제 필요한 설정이 완료되었습니다. 브라우저를 열고 index.html 파일을 실행하세요. 그러면 다음 페이지가 표시됩니다: “My Morning Scheduler” (드래그 앤 드롭 옵션 포함). 가운데의 흰색 선은 이미 완료된 작업과 아직 완료되지 않은 작업을 구분하는 다리 역할을 합니다:

결론

드래그 앤 드롭은 현대 웹사이트에서 사용하기에 매우 훌륭한 옵션입니다. 이 가이드에서는 초보자가 튜토리얼을 쉽게 따라할 수 있도록 몇 가지 이벤트 핸들러를 사용했습니다. 이벤트 핸들러는 총 8개가 있으며, 실력이 향상됨에 따라 이를 활용해 보시기를 권장합니다. 이 튜토리얼에 사용된 함수와 코드에 익숙해지면 다음과 같은 JavaScript 주제를 더 깊이 탐구할 수 있습니다: jQuery (그리고 탐색을 시작해 보세요). 또한, 방금 배운 개념을 활용하여 할 일(To-Do) 앱, JavaScript 날짜 및 시간 기능을 이용한 주간 진행 상황 추적기 및 기타 애플리케이션을 만들어 볼 수도 있습니다.

JavaScript 및 웹 개발 주제에 대해 더 자세히 알아보려면 다음 리소스를 확인해 보세요: 저희 블로그:

즐거운 컴퓨팅 되세요!

Shreyas Patil

작성자 · CloudSigma

Preslav Dobrev는 CloudSigma의 크리에이티브 디자이너로서, 전통적이고 혁신적인 마케팅 채널을 활용하여 일관된 비즈니스 정체성을 구축하는 데 중점을 두고 있습니다. 그는 영향력 있는 브랜드 내러티브를 창출하기 위해 예술적 비전과 전략적 마케팅을 결합하는 데 능숙합니다.

순수 바닐라 JavaScript로 드래그 앤 드롭 요소 만들기

사전 요구 사항

1단계: 새 프로젝트 생성

2단계: 초기 설정

3단계: CSS를 사용한 스타일링

4단계: JavaScript 도입

결론

Shreyas Patil

댓글